学习 BFC (Block Formatting Context)

什么是BFC

`Block Formatting Context` = `block-level box` + `Formatting Context`

Box 即盒子模型
block-level box 即块级元素; inline-level box 即行内元素
Formatting context 是W3C CSS2.1规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系、相互作用。最常见的 Formatting context 有 Block fomatting context (简称BFC)和 Inline formatting context(简称IFC)， CSS3中还增加了G（grid）FC和F(flex)FC。

BFC直译为块级格式上下文。它是一个独立的渲染区域，并且这个独立容器里box的布局与这个容器外的box毫不相干，值得注意的是只有块级元素参与，它规定了内部的块级元素如何布局

BFC的生成

BFC是一块渲染区域，那这块渲染区域到底在哪，它又是多大，这些由生成BFC的元素决定，CSS中规定满足下列条件之一的元素便会生成BFC

根元素(<html>)或其它包含它的元素
浮动元素(元素的 float 不是 none)
绝对定位元素(元素具有 position为 absolute 或 fixed)
内联块(元素具有 display: inline-block)
表格单元格(元素具有 display: table-cell ,HTML表格单元格默认属性)
表格标题(元素具有 display: table-caption ,HTML表格标题默认属性)
overflow 的值不为 visible 的元素
弹性盒(display: flex 或 display: inline-flex)
display: flow-root
column-span: all

BFC的范围

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

<div id='div_1' class='BFC'>
    <div id='div_2'>
        <div id='div_3'></div>
        <div id='div_4'></div>
    </div>
    <div id='div_5' class='BFC'>
        <div id='div_6'></div>
        <div id='div_7'></div>
    </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之外。#div_6和#div_7属于#div_5创建新的BFC中。
可以认为一个元素不能同时存在于两个BFC中

BFC的约束规则

内部的box会在垂直方向上一个接一个的放置(虽然原文是In a block formatting context, boxes are laid out one after the other, vertically ,但私认为，这里的boxes指的是块级元素)
垂直方向上的距离由margin决定，属于同一个BFC的两个相邻Box的margin会发生塌陷（即发生重叠，且以较大的一方作为两者垂直方向上的margin）
每个元素的左外边距与该元素包含块的左边缘相接触，即使存在浮动元素也应该如此，除非子元素又形成了一个新的BFC(这里需要先理解包含块的含义，下文再解释)
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然
计算BFC的高度时，考虑BFC所包含的所有元素，连浮动元素也参与计算(也就是不会发生高度坍塌)
BFC的区域不会与float的元素区域重叠(也就是浮动的元素不会遮挡BFC)

包含块

首先一个完整的box包含margin-box、border-box、padding-box、content-box。即使设置为0，也是存在的。
而包含块有可能是某个box的content-box，也有可能是某个box的padding-box。这取决于被包含块所包含的box的position属性。所以说包含块不是一个完整的box。
例如：如果某个box的position属性为absolute，包含块就是由它最近的position的值不是static的祖先元素的padding-box组成。此时定位的位置(如left: 20px; top: 0)是相对包含块而言的。
例如：如果某个box的position属性为static或relative，包含块就是由它的最近的祖先块元素的content-box组成。
例如：如果某个box的position属性为fixed，包含块为视口，即所看到的窗口上。

约束规则3的理解

BFC中的box应该与其自身的包含块相接触，而非与BFC盒子相接触，这个包含块有可能是BFC中的一部分，也有可能和BFC无关。
BFC中的盒子是与其包含块的left edge相接触，而不是包含块的left-border相接触。因为包含块并非一个完整的盒子，不可能有left-border。 left edge 正确的翻译为左边缘。
即使存在浮动盒子也应该如此（如此的意思就是布局应该按照上述的规则进行），除非子盒子又形成了一个新的BFC。
例如一个父盒子使用overflow:hidden形成BFC，其中有2个子盒子，一个浮动，另一个不浮动。那么浮动盒子会盖住不浮动盒子，但是两个盒子都会触碰到BFC的content-box。
例如一个父盒子使用overflow:hidden形成BFC，其中有2个子盒子，一个浮动，另一个也浮动。那么第二个盒子会追在第一个盒子屁股后面，因为第二个盒子使用了浮动，又形成了一个新的BFC。

约束规则4的理解

当BFC外部存在浮动时，它不应该影响BFC内部Box的布局，BFC会通过变窄，而不与浮动有重叠。
同样的，当BFC内部有浮动时，为了不影响外部元素的布局，BFC计算高度时会包括浮动的高度。
避免margin重叠也是这样的一个道理，利用BFC包含一个元素，防止这个元素与BFC外的元素发生margin collapse。

BFC在布局中的应用

防止margin重叠(塌陷)：通过给其中一个box创建BFC来解决两个相邻box垂直(水平)方向margin重叠问题或者嵌套元素的margin重叠问题。
清除内部浮动：通过给box生成BFC，可以使得内部的浮动元素也参与到计算中来，从而达到清除内部浮动的效果
自适应两栏布局：通过给最外层box设置定宽，内部子元素aside设置float，并将另一子元素生成BFC，来实现自适应两栏布局
自适应三栏布局：通过给最外层box设置定宽，左右两栏设置float并设为定宽，中间栏生成BFC，即可实现中间栏自适应的三栏布局

学习链接

juejin.cn/post/684490… github.com/zuopf769/no…

『妈妈再也不用担心之』BFC