CSS之BFC及其应用

时间：2024-10-06 13:34:44

BFC是Block Formatting Context的缩写，直译过来就是“块级格式化上下文”。先不管它到底是什么，看一个例子：

.parent{
  border: 1px solid blue;
}
.children{
  width: 100px;
  height: 100px;
  background: red;
  float: left;
  margin: 10px;
}

<div class="parent">
  <div class="children"></div>
  <div class="children"></div>
</div>

结果：
CSS之BFC及其应用
想必大家都了解，子元素float时父容器是不会被撑开高度的。一般的解决方法是给父容器加上 .clearFix类，

.clearfix:after{
  content:".";
  display:block;
  height:0;
  clear:both;
  visibility:hidden
}

清除浮动后，父容器能自动获得正确的高度了：
CSS之BFC及其应用
现在通过BFC，可以用更简单的方法解决这个问题了，只需要在父容器的样式里加上一句 overflow: hidden :

.parent{
  border: 1px solid blue;
  overflow: hidden;
}

CSS之BFC及其应用
原理：块级元素使用 overflow: hidden 的时候会创建一个 BFC ,而计算BFC的高度时，浮动元素也会参与计算。
BFC还有另外一个非常重要的特性，那就是垂直方向的外边距重叠，还是之前那两个div,样式改为:

.children{
  width: 100px;
  height: 100px;
  background: red;
  margin: 50px 10px;
  overflow: hidden;
}

我们为两个div设置了上下50px的外边距，按理来说两个div的距离应该是100px；然而事与愿违，
CSS之BFC及其应用
上边div的margin-bottom与下边div的margin-top重叠了。
当然，BFC的特性不止这些，创建BFC的方法也不只有overflow: hidden。

BFC元素的特性

参考w3-CSS2规范,9.4.1节，总结如下：
1 内部的Box会在垂直方向从上到下排列。
2 内部的Box会在水平方向从左到右排列（对于从右到左的格式化则相反）。即使存在浮动也是如此。
3 Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生折叠
4 BFC的区域不会与float box叠加。这条后边会解释
5 BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然。
6 计算BFC的高度时，浮动元素也参与计算。

哪些元素会创建BFC？

  • 根元素
  • float元素
  • 绝对定位元素（position属性为absolute或fixed）
  • 不是块级框的元素（display属性为inline-block, table-cell, table-caption等）
  • overflow属性不为visible的元素

BFC的应用场景

1 闭合浮动 即前边父容器获取高度问题，不再介绍了 注意这里不叫清除浮动，因为BFC元素可以包含浮动元素，并且浮动元素也参与计算高度。
2 防止垂直 margin 重叠
前边提到的垂直外边距折叠问题，可以通过给子元素外层包裹一个BFC块，像这样：

<div class="parent">
  <div class="children"></div>
    <div class="BFC">
      <div class="children"></div>
    </div>
</div>

这样之前的两个children块便不属于同一个BFC了。但是一般不建议滥用BFC来解决此类问题，推荐使用同向的margin-top，margin-bottom来解决。
3 多列布局
前边BFC特性第4条提到了，BFC的区域不会与float box叠加，这句话是什么意思呢，看一个例子：

.food{
  width: 100px;
  height: 100px;
  float: left;
}

<div class="container">
  <img class="food" src="food.png">
  <p class="BFC">商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍
     商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍
     商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍
     商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍
     商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍
     商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍
     商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍
     商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍
  </p>
</div>

CSS之BFC及其应用
当我们展示一张图片和介绍性文字的时候，一般会给图片加上float属性，但是有时候这种文字环绕的方式不是我们要的效果，怎么将图片和文字变成两列式布局呢？很简单，给文字的容器p元素创建一个BFC。

.BFC{
  overflow: hidden;
}

CSS之BFC及其应用
使用BFC，很简单方便的就将效果实现了。
图片和文字过于紧凑显然不够美观，我们给图片和文字设置20px的间距。如果直接给文字块设置左边距，需要将图片的宽度计算在内，即120px，这种方式显然不好。这种情况我们只需给浮动的元素设置一个20px的右边距即可。

.food{
  width: 100px;
  height: 100px;
  float: left;
  margin-right: 20px;
}

CSS之BFC及其应用

总结

  • BFC是指块级格式化上下文，它是一个独立的渲染区域，内部的元素布局方式与外部无关；
  • 主要特点是相邻元素间垂直方向的外边距会被折叠，以及内部的浮动元素会参与计算高度；
  • 主要用途是闭合浮动使父容器自动获得高度，以及实现多列布局。

个人理解仅供参考，如有错误欢迎指正。

相关文章