关于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个子级块(box一、box2)，咱们知道float会使块级脱离文档流。这样，父级块(box)的高度就不包含(box一、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就是一个区域，元素处于这个区域中，就必须遵照这个区域的规则。相应的因为这些规则，块就具备了一些特殊的做用。