CSS-BFC详解

1. 前言

上图是本文整理的与BFC有关的思维导图。下面将逐个介绍上图中出现的所有概念。

2. 正文

2.1 Formatting Context

它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。包括BFC和IFC。

2.2 BFC简单印象

BFC全称”Block Formatting Context”, 中文为“块级格式化上下文”。啪啦啪啦特性什么的，一言难尽，大家可以自行去查找，我这里不详述，免得乱了主次，总之，记住这么一句话：BFC元素特性表现原则就是，内部子元素再怎么翻江倒海，翻云覆雨都不会影响外部的元素。所以，避免margin穿透啊，清除浮动什么的也好理解了。

摘自张鑫旭的文章：链接

2.3 BFC和IFC布局规则

BFC：

1. 内部的Box会在垂直方向，一个接一个地放置。
2. Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
3. 每个元素的左外边缘（margin-left)， 与包含块的左边（contain box left）相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。除非这个元素自己形成了一个新的BFC。
4. BFC的区域不会与float box重叠。
5. BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
6. 计算BFC的高度时，浮动元素也参与计算

IFC：

在行内格式化上下文中，框(boxes)一个接一个地水平排列，起点是包含块的顶部。水平方向上的 margin，border 和 padding在框之间得到保留。框在垂直方向上可以以不同的方式对齐：它们的顶部或底部对齐，或根据其中文字的基线对齐。包含那些框的长方形区域，会形成一行，叫做行框。

以上均摘自：链接（作者参考了W3C文档）

2.4 如何创建BFC

1. 根元素或其它包含它的元素
2. 浮动 (元素的 float 不是 none)
3. 绝对定位的元素 (元素具有 position 为 absolute 或 fixed)
4. 非块级元素具有 display: inline-block，table-cell, table-caption, flex, inline-flex
5. 块级元素具有overflow ，且值不是 visible

摘自：链接（作者参考了W3C文档）

2.5 BFC的应用

1. 清除浮动：解决父元素高度塌陷问题；
2. 布局：自适应两栏布局；
3. 防止垂直margin合并：解决外边距合并问题。

具体的例子可以参考：链接

3. 参考资料

[1] CSS深入理解流体特性和BFC特性下多栏自适应布局 https://www.zhangxinxu.com/wordpress/2015/02/css-deep-understand-flow-bfc-column-two-auto-layout/

[2] BFC与IFC概念理解+布局规则+形成方法+用处 https://segmentfault.com/a/1190000009545742

[3] 什么是BFC？看这一篇就够了 https://blog.csdn.net/sinat_36422236/article/details/88763187