BFC

BFC 定义

BFC(Block formatting context)直译为“块级格式化上下文”。它是一个独立的渲染区域，只有 Block-level box 参与，它规定了内部的
Block-level box 如何布局，并且与这个区域外部毫不相干。
首先了解一下Box Formatting Context的相关概念。

Formatting Context

Formatting Context是W3C CSS2.1 规范中的一个概念，它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素如何定位，以及和其他元素的关系和相互作用。最常见的Formatting context 有Block formatting context（简称BFC）和 Inline formatting context（简称IFC）。

Box：css布局的基本单位

Box 是 css 布局的对象和基本单位，一个页面是由很多个 Box 组成的。元素的类型和 display 属性，决定了这个 Box 的类型。不同类型的 Box，会参与不同的 Formatting Context（一个决定如何渲染文档的容器），因此 Box 内的元素会以不同的方式渲染。有哪些盒子呢：

• block-level box：display属性为 block, list-item, table 的元素，会生成 block-level box.并且参与 block formatting context.
• inline-level box：display 属性为 inline, inline-block, inline-table 的元素，会生成 inline-level box。并且参与 inline formatting context.
• run-in box: css3中才有。

BFC

BFC是一个独立的布局环境，其中的元素布局时不受外界的应i昂，并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。

BFC的布局规则

• 内部的Box会在垂直方向，一个接一个的放置。
• Box垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的margin会发生重叠。
• 每个盒子的margin box的左边，与包含块border box 的左边想接触（对于从左往右的格式化，否则相反）。即使存在浮动也是如此。
• BFC的区域不会与float box 重叠。
• BFC就是页面上的一个隔离的独立容器，容器里的子元素不会影响到外面的元素，反之也如此。
• 计算BFC的高度时，浮动元素也参与计算。

如何创建（触发）BFC

• html根元素本身就是一个BFC元素（body元素不是）
• 浮动元素：float 除了 none 以外的值
• 绝对定位元素： position: absolute / fixed
• display: inline-block / table-cells / flex
• overflow: 除了 visible 以外的值 （hidden / auto / scroll）

BFC 作用

1. 利用BFC避免margin重叠
eg：

image.png

image.png

根据第二条，属于同一个BFC的两个相邻Box会发生margin重叠，所以我们可以设置两个不同的BFC。：把第一个 p 用 div 包裹，然后激活它成为一个 BFC。

image.png

image.png

2. 自适应两栏布局
根据 每个盒子的margin box 的左边，与包含块border box 的左边想接触，即使存在浮动也是如此。
eg：

image.png

image.png

利用 BFC的区域不会与float box 重叠，我们可以rangright成为单独的BFC。

image.png

image.png

right会自动的适应宽度，这时候就形成了一个两栏自适应的布局。

3. 清除浮动
当我们不给父节点设置高度，子节点设置了浮动的时候，父节点会发生高度塌陷，这是要用清除浮动。
eg：

image.png

image.png

这时候可以根据 计算BFC的高度是，浮动元素也参与计算，给父节点激活BFC。

image.png

image.png

参考：《BFC详解》