前端CSS理解 —— BFC(块级格式化上下文)

我走得很慢，但我从不后退。人生苦短，何妨一试。

1.什么是BFC？

        BFC即 Block Formatting Contexts (块级格式化上下文)， 是 W3C CSS2.1 规范中的一个概念。BFC是指浏览器中创建了一个独立的渲染区域（内部元素的渲染不会影响边界以外的元素），并且拥有一套渲染规则，他决定了其子元素如何定位，以及与其他元素的相互关系和作用。

2.BFC特性

具有 BFC 特性的元素可以看作是隔离的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。（因此它可以解决一些布局问题）

官方文档对BFC的描述

        In a block formatting context, boxes are laid out one after the other, vertically, beginning at the top of a containing block. The vertical distance between two sibling boxes is determined by the 'margin' properties. Vertical margins between adjacent block-level boxes in a block formatting context collapse.
        In a block formatting context, each box's left outer edge touches the left edge of the containing block (for right-to-left formatting, right edges touch). This is true even in the presence of floats (althouah a box's line boxes may shrink due to the floats), unless the box establishes a new block formatting context (in which case the box itself may become narrower due to the floats).

——百度翻译

        在块格式设置上下文中，框从包含块的顶部开始一个接一个地垂直排列。两个同级框之间的垂直距离由“margin”属性决定。块格式上下文中相邻块级框之间的垂直边距折叠。

        在块格式设置上下文中，每个框的左外边缘都会接触到包含块的左边缘（对于从右到左的格式设置，右边缘会接触）。即使在存在浮动的情况下也是如此（尽管框的行框可能会因浮动而收缩），除非框建立了新的块格式化上下文（在这种情况下，框本身可能会因浮点数而变窄）。

 简单概况如下：

•  在BFC中，box会在垂直方向上一个挨着一个的排布；
• 垂直方向的间距由margin属性决定；
• 在同一个BFC中，相邻两个box之间的margin会折叠（collapse）；
• 在BFC中，每个元素的左边缘是紧挨着包含块的左边缘的；

3.触发（创建）BFC

• html 根元素
• 浮动元素：float 属性值为 none 以外的值（即浮动元素）
• 绝对定位元素：position 属性值为 absolute 或 fixed
• display 属性值为 inline-block、table-cells、flex
• overflow 属性为 visible 以外的值 (hidden、auto、scroll)

常用的触发方式：给父级元素添加以下任一样式

• overflow: hidden;
• display: flex / inline-flex / inline-block;
• position: absolute / fixed;

• CSS3新增属性值 display: flow-root;兼容性略逊

4.BFC应用（BFC的作用）

（1）解决浮动高度塌陷

当父级元素没有设置高度（height取默认值:auto）时，子级元素浮动会使父级元素高度塌陷

解决方法：令父级元素触发BFC

10.6.7 'Auto' heights for block formatting context roots
In certain cases (see. e.a. sections 10.6.4 and 10.6.6 above), the heiaht of an element that establishes a block formatting context is computed as follows:

If it only has inline-level children, the height is the distance between the top of the topmost line box and the bottom of the bottommost line box.

lf it has block-level children, the height is the distance between the top margin-edge of the topmost block-level child box and the bottom margin-edge of the bottommost block-level child box.

Absolutely positioned children are ignored, and relatively positioned boxes are considered without their offset. Note that the child box may be an anonymous block box.

In addition, if the element has any floating descendants whose bottom margin edge is below the element's bottom content edge, then the height is increased to include those edges. Only floats that participate in this block formatting context are taken into accounte.g.floats inside absolutely positioned descendants or other floats are not.

 

——百度翻译

10.6.7块格式化上下文根的“自动”高度

在某些情况下（参见上文第10.6.4节和第10.6.6节），建立块格式化上下文的元素的高度计算如下：

如果它只有内联级别的子级，则高度是最上面的行框顶部和最下面的行框底部之间的距离。

如果它有块级别的子框，则高度是最上面的块级别子框的上边距边缘和最下面的块级子框的底边距边缘之间的距离。

绝对定位的子对象将被忽略，相对定位的框将被视为没有偏移。请注意，子框可能是一个匿名阻止框。

此外，如果元素有任何浮动子体，其底部边距边缘低于元素的底部内容边缘，则高度会增加以包括这些边缘。只有参与此块格式化上下文的浮点才会被考虑在内，例如，位于绝对位置的子体中的浮点或其他浮点不被考虑在内。

BFC的高度是auto的情况下，是如下方法计算高度的

1.如果只有inline-level，是行高的顶部和底部的距离；

2.如果有block-level，是由最底层的块上边缘和最底层块盒子的下边缘之间的距离

3.如果有绝对定位元素，将被忽略；

4.如果有浮动元素，那么会增加高度以包括这些浮动元素的下边缘

 

 

（2）解决外边距margin重叠

因为：The vertical distance between two sibling boxes is determined by the 'margin' properties. Vertical margins between adjacent block-level boxes in a block formatting context collapse.

两个同级（兄弟）框之间的垂直距离由“margin”属性决定。块格式上下文中相邻块级框之间的垂直边距折叠。

令两个box分别属于不同的BFC即可——“套娃”