关于BFC

什么是BFC

bfc( 块级格式化范围 )是web页面中盒模型布局的CSS渲染模式，他决定了元素如何对其内容进行定位，以及与其他元素的关系核相互作用。当涉及到可视化布局的时候，bfc提供了一个HTML元素按照一定规则布局的环境。一个环境的元素不会影响其他环境的布局。所以BFC就是一个范围，也可以把它理解成一个独立的容器。

一个新的BFC可以通过给容器添加任何一个触发BFC的CSS样式，如overflow: scroll,overflow: hidden,display: flex,float: left,或者display: table来创建。

其一般的表现规则，大概有一下这些：

1，在创建了bfc元素中，其子元素按文档流一个接一个放置，垂直方向上他们的起点是一个包含块的顶部，两个相邻的元素之间的垂直距离取决于 ‘margin’ 特性

2、在bfc中，每一个元素左外边与包含块的左边相接触，即使存在浮动也是这样，除非这个元素也创建了一个新的Block Formatting Context。

3、bfc就是页面上的一个隔离的独立容器，容器里面的子元素不会在布局上影响到外面的元素，反之也是如此。

4、创建了bfc的元素不能与浮动元素重叠。

5、当容器有足够的剩余空间容纳BFC的宽度时，所有浏览器都会将BFC放置在浮动元素所在行的剩余空间内。

如何产生BFC

当一个HTML元素满足下面条件的任何一点，都可以产生Block Formatting Context：

float的值不为none。

overflow的值不为visible。

display的值为table-cell,

table-caption, inline-block中的任何一个。

position的值不为relative和static。

BFC的范围

它包含创建该上下文元素的所有子元素，但不包括创建了新BFC子元素的内部元素

例子：

</div>

</div>

上面这段代码表示，#div_1创建了一个块格式上下文，这个上下文包括了#div_2、#div_3、#div_4、#div_5。即#div_2中的子元素也属于#div_1所创建的BFC。但由于#div_5创建了新的BFC，所以#div_6和#div_7就被排除在外层的BFC之外。

这从另一角度说明，一个元素不能同时存在于两个BFC中。

BFC的一个最重要的效果是，让处于BFC内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响。

BFC的效果

就如刚才提到的，BFC的最显著的效果就是建立一个隔离的空间，断绝空间内外元素间相互的作用。然而，BFC还有更多的特性：

1.内部的盒会在垂直方向一个接一个排列

2.处于同一个BFC中的元素相互影响，可能会发生margin collapse

3.计算BFC的高度时，考虑BFC所包含的所有元素，连浮动元素也参与计算

6.浮动盒区域不叠加到BFC上

总结

以上就是BFC的分析，BFC的概念比较抽象，但通过实例分析应该能够更好地理解BFC。在实际中，利用BFC可以闭合浮动，防止与浮动元素重叠。同时，由于BFC的隔离作用，可以利用BFC包含一个元素，防止这个元素与BFC外的元素发生margin collapse等。