关于.clearfix

Question

看老师写的代码

.clearfix:before,

.clearfix:after{

    content:" ",

    display:table;

}

已经形成BFC，可以闭合浮动了，为什么后面还要添加

.clearfix:after{

    clear:both;

}

如果是为了兼容，为什么不写 *zoom:1;？

Answer 1

提问者 aparch 2017-06-03 20:38:31

我自己来回答，触发BFC，只是保证

1. 上下margin不重叠

2. 和其他浮动的元素不重叠

3. 可以包裹自身浮动子元素

   所以，.clearfix:after不写clear:both的话，还是有可能出在在前面浮动元素的左边，或者是右边的，如果有合适的空白的话，只不过肯定不会被浮动元素覆盖内容，所以要写clear:both，确保这个元素左右都没有浮动，那肯定是另起一行了。

• 提问者 aparch #1

  老师看到的话，就回复一下，我理解的对不对？我没看后面的章节，看到float第一小节就去查bfc的资料了。刚刚才看到第二节。