clear:both算触发BFC吗?

Question

.clearfix:before,
.clearfix:after{
    content:"";
    display:table;
}
.clearfix:after{
    clear:both;
}

假设clear:both没有触发BFC,但是它清除了浮动对吧。既然清除了浮动,为什么还display:table;触发BFC呢?

老师说过"只要触发了BFC就可以清楚浮动"

既然display:table;触发BFC,为什么还要clear:both;

到底BFC是为了清除浮动还是因为什么其他原因

Answer 1

姜维 2016-08-29 14:55:52

理解这个问题咱们可以一步一步看

1、我们不想在代码里面用直接添加元素的方式清除浮动也就是不想用下面的方式

<div class="p">
  <div class="c">
    Lorem ipsum dolor sit amet, consectetur 
    adipisicing elit. Distinctio, sapiente.
  </div>
  <div style="clear: both"></div>
</div>

2、那我们就用after伪元素来解决这个问题但是我们不能只写一句话

.p:after {
  clear: both;
}

比如我们只写上面这一句这个伪元素是没有内容的所以他就不起效果我们必须给这个伪元素加点内容才行比如

.p:after {
  content: '.';
  clear: both;
}

这样就生效了但是有问题了content 里面有内容不管写成啥都会影响页面content里面写成空格又没效果。那么我们可以通过把这个content隐藏起来解决

.p:after {
  content: '.';
  clear: both;
  display: block;
  height: 0;
  visibility: hidden;
}

3、上面的代码其实已经很好解决了清除浮动的问题不过看起来比较啰嗦怎么精简呢

我们可以参考BFC的特性BFC有三个特性BFC会阻止垂直外边距margin-top、margin-bottom折叠、BFC不会重叠浮动元素、BFC可以包含浮动。也就是说可以对父容器添加一些属性来形成BFC达到“清浮动”效果设置成 display:table;就可以触发BFC

.p:after {
  content: '';
  clear: both;
  display: table;
}

这样就是最精简的方式了。注意这里的content不能省略省略了就不会产生伪元素了。

4、至于为什么给 :before 也添加一个就和清除浮动无关了纯粹是为了解决高度塌陷问题也就是上面说的BFC会阻止垂直外边距margin-top、margin-bottom折叠。

• 提问者 weibo_哆啦A梦有大口袋_0 #1

  非常感谢！

• 慕粉3937289 #2

  content没有内容也可以清除浮动啊

• 慕ke小粉si儿 #3

  很好，谢谢提供

点开查看后面1条评论

Answer 2

提问者 weibo_哆啦A梦有大口袋_0 2016-08-29 15:22:33

也就是说BFC可以

                1.防止margin重叠

                3.可以包含浮动元素

                2.不会重叠浮动元素是指标准流中的元素不会与浮动元素重叠吗？不知道我理解的对不对

• 姜维 #1

  基本上可以这样理解，更详细的信息，你可以看看：http://www.html-js.com/article/1866

Answer 3

Mei_槑 2016-11-23 15:59:50

BFC是什么？？

• 提问者 weibo_哆啦A梦有大口袋_0 #1

  BFC是什么,我不太明白。但是知道其作用即可。
  你百度一下BFC有很多详细的文章

• Mext #2

  小科普：到底什么是BFC(块级格式化上下文)、IFC(内联格式化上下文)、GFC(网格布局格式化上下文)和FFC(自适应格式化上下文) http://www.jshacker.com/note/3608