BFC：前端布局中的独立空间

BFC 是什么？

BFC 的全称是 Block Formatting Context，名为 “块级格式化上下文”。作用是让触发 BFC 的元素处于一个完全独立的空间，使其子元素的布局不会影响到外界的布局。BFC 的概念最早出现在 CSS2.1 规范中，但在 CSS3 中才得到广泛应用。

BFC 的作用

BFC 的作用主要有以下几个方面：

1. 阻止浮动元素的溢出 ：浮动元素会脱离普通流，如果浮动元素的内容超出了其父元素的高度，则会溢出到父元素之外。BFC 可以阻止浮动元素的溢出，使其不会影响到其他元素的布局。
2. 防止绝对定位元素的影响 ：绝对定位元素也会脱离普通流，如果绝对定位元素的位置超出了其父元素的边界，则会影响到其他元素的布局。BFC 可以阻止绝对定位元素的影响，使其不会影响到其他元素的布局。
3. 创建新的块级格式化上下文 ：BFC 可以创建一个新的块级格式化上下文，使其子元素的布局与其他元素的布局隔离。这可以用来实现一些复杂的布局效果，例如多列布局、弹性布局和网格布局。

BFC 的触发条件

以下条件可以触发 BFC：

1. float 属性不为 none ：如果一个元素的 float 属性不为 none，则该元素会创建一个新的 BFC。
2. position 属性为 absolute 或 fixed ：如果一个元素的 position 属性为 absolute 或 fixed，则该元素会创建一个新的 BFC。
3. display 属性为 inline-block、table-cell 或 table-caption ：如果一个元素的 display 属性为 inline-block、table-cell 或 table-caption，则该元素会创建一个新的 BFC。
4. overflow 属性不为 visible ：如果一个元素的 overflow 属性不为 visible，则该元素会创建一个新的 BFC。

BFC 在布局中的应用

BFC 在布局中的应用非常广泛，以下是一些常见的应用场景：

1. 多列布局 ：BFC 可以用来实现多列布局，只需要将每个列元素设置为一个 BFC，然后使用 float 属性或 flexbox 布局来实现多列布局。
2. 弹性布局 ：BFC 可以用来实现弹性布局，只需要将父元素设置为一个 BFC，然后使用 flexbox 布局来实现弹性布局。
3. 网格布局 ：BFC 可以用来实现网格布局，只需要将父元素设置为一个 BFC，然后使用 grid 布局来实现网格布局。
4. 浮动元素的定位 ：BFC 可以用来定位浮动元素，只需要将浮动元素的父元素设置为一个 BFC，然后使用 margin、padding 或绝对定位来定位浮动元素。
5. 绝对定位元素的定位 ：BFC 可以用来定位绝对定位元素，只需要将绝对定位元素的父元素设置为一个 BFC，然后使用 margin、padding 或绝对定位来定位绝对定位元素。