关于BFC的简单理解

BFC介绍

BFC官方定义：块格式化上下文，它是Web页面的可视化CSS渲染的一部分。具体功能类似与一种官方定义的特殊的css属性，这种属性是不可更改的。

BFC规则

BFC的一系列作用，比如常用的清除浮动，取消margin合并等等这些作用得以实现，是因为BFC的一些规则。它的规则如下：

• 【1】内部的Box会在垂直方向，一个接一个地放置。
• 【2】Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
• 【3】每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格化，否则相反)。即使存在浮动也是如此。
• 【4】BFC的区域不会与float box重叠。
• 【5】BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
• 【6】计算BFC的高度时，浮动元素也参与计算

BFC生成方式

• 该元素是根元素或包含根元素
• float的值不为none
• overflow的值不为visible
• display的值为inline-block、table-cell、table-caption
• position的值为absolute或fixed

规则运用：清除浮动

上图中定义了父级块(box)和2个子级块(box1、box2)，我们知道float会使块级脱离文档流。这样，父级块(box)的高度就不包含(box1、box2)，如果我们想要父级块的具体高度(包含box1和box2)，那么我们可以参考BFC的规则【6】，即将父级元素处于BFC区域下，也就是在父级元素处生成BFC即可（参考生成方式）。我们添加overflow:hidden，结果如下：

规则运用：清除margin合并

上图box1和box2处在同一BFC区域中(html根元素),所以由规则【1】【2】我们可以理解两个块之间的距离为50px，而不是（50+50）。

通过给其中一个盒子添加父级块(box)，通过设置父级块生成新的BFC区域，由于box1和box2处在不同的BFC区域，所以距离变为了（50+50）。 综上情况，我所理解的BFC就是一个区域，元素处于这个区域中，就必须遵守这个区域的规则。相应的由于这些规则，块就具有了一些特殊的作用。