CSS之BFC及其应用

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>

结果：

想必你们都了解，子元素float时父容器是不会被撑开高度的。通常的解决方法是给父容器加上 .clearFix类，

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

清除浮动后，父容器能自动得到正确的高度了：

如今经过BFC，能够用更简单的方法解决这个问题了，只须要在父容器的样式里加上一句 overflow: hidden :

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

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

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

咱们为两个div设置了上下50px的外边距，按理来讲两个div的距离应该是100px；然而事与愿违，

上边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>

当咱们展现一张图片和介绍性文字的时候，通常会给图片加上float属性，可是有时候这种文字环绕的方式不是咱们要的效果，怎么将图片和文字变成两列式布局呢？很简单，给文字的容器p元素建立一个BFC。

.BFC{ overflow: hidden; }

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

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

总结

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