clear:both算触发BFC吗?

来源：4-4 清除浮动2

weibo_哆啦A梦有大口袋_0

2016-08-29

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

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

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

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

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

写回答

3回答

姜维

2016-08-29

已采纳

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

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折叠。

与可同学

姜老师，按照您所说的，content: '';是为了能够产生伪元素，display: table;是为了触发BFC，最终达到“清浮动”效果。那我们的代码是不是这样就可以了： .p:after { content: ''; display: table; } clear: both;这个语句就没有必要了吧。

2019-03-14

共4条回复