CSS--BFC规则的作用

原理解释——block formatting context

下列情况将创建一个块格式化上下文：

• float的值不为none
• position的值为absolute或fixed
• overflow的值不为visible（默认就是visible，所以要改变必须显式设置）
• display的值为table-cell, table-caption, flex, inline-flex, inline-block,中的任何一个
• 根元素（其中除了inline-flex和inline-block的前后不会强制进行换行以外，其他都会三者都会使元素强制前后换行。）

BFC应用要点：

1. BFC不会和浮动元素重叠。

• 例：普通浮动

普通float.png

• 例：将右边变成BFC（添加overflow:hidden）

左边浮动，右边BFC.png

• 解析：右边设置了BFC后，由于（1）BFC不能与浮动元素重叠，所以这里BFC自动避让开，就像两者接壤处有一条边界，BFC永远不会超过。并且如果想在BFC上设置margin-left使两者有间隔，这个将遏制必须大于图片的宽度，因为（2）每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。

1. BFC会计算内部浮动元素的高度

• 当父元素不是BFC，且未设置高度，而内部又有浮动元素时：

无BFC的浮动.png

• 如果把父元素改成BFC，它就会识别到内部浮动元素的高度，从而将自己的高度撑开，避免高度塌陷

有BFC的浮动.png

1. 利用上面的父容器会计算内部浮动元素高度的特性，可以使父元素形成闭合浮动，从而让浮动不影响其他元素，达到清楚浮动的目的。

2. BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

3. BFC可以解决上下margin重叠的问题：

• BFC内部的Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠，但只要两个中有一个不属于父BFC，或两者都创建了新的BFC，那么margin就不会发生重叠