CSS 块格式化上下文（BFC）
BFC 的基础概念和常见用途
定义
块格式化上下文（Block Formatting Context）是一个独立的渲染区域，其最有用的一个特性便是：各个 BFC 之间不会互相影响。
常见的 BFC 元素：
- 根元素（
<html>） - 浮动元素（float）
- position 属性为 absolute/fixed 的元素
- display 属性不为 block 的元素
- overflow 属性不为 visible 的元素（常用）
用途
BFC 常见的用途有三种：
- 清除浮动
- 清除边距折叠
- 实现自适应布局
清除浮动
首先来了解一下浮动，float 的原始作用是为了实现文字环绕效果，可以理解为部分脱离文档流。
脱离文档流分为两种：
- 部分脱离文档流：例如
float，使用float属性后，其他 block 盒子会无视float元素进行布局，但是其他盒子内的 inline 元素和 inline-block 元素依旧会为这个浮动的盒子让出位置。 - 完全脱离文档流：例如
position:absolute，使用绝对定位的盒子，其他盒子无论是其本身还是里面的任何元素都会无视这个绝对定位的盒子进行布局。
当一个元素被设置成浮动时，就会部分脱离文档流，无法撑开其父元素，导致各类显示问题，所以需要进行清除浮动，下面是一个常见的例子，浮动元素没有将父元素的高度撑开造成了高度塌陷。
clear 清除浮动
设置了clear:left/right的盒子，不允许和左/右侧的浮动元素相邻，设置了clear:both的盒子，左右两侧的都不能与浮动元素相邻。
这是未设置clear: both的效果：
这是设置了clear: both的效果：
现在已经知道为浮动元素的兄弟元素添加 clear 属性能够达到清除浮动的效果，这个元素可以使空白的 div ，也可以是伪元素。对于用于清除浮动来说，clear 的值是left、right 还是 both 取决于浮动元素在左侧还是右侧，因为只需要这个属性让元素与浮动元素不相邻即可。
下面为使用伪元素清除浮动：
BFC 清除浮动
BFC 清除浮动和 clear 清除浮动的区别在于：BFC 是为父元素添加属性，比如添加 overflow:hidden，父元素变成了 BFC，可以包裹浮动流，即使内部所有元素都是浮动元素，都不会产生高度塌陷。
清除边距折叠
在同一个 BFC 内，两个或多个毗邻的普通流中的元素（可能是父子元素，也可能是兄弟元素）在垂直方向上的外边距会发生叠加，取较大值显示，这种形成的外边距称之为外边距叠加。例如：父元素设置了 margin-top=5px，子元素设置了 margin-top=10px，会导致父元素实际显示的是 margin-top=10px 的效果
这里要注意的是元素之间必须是毗邻的，不能存在 padding 或 border，而且只有在垂直方向会发生折叠，水平方向并不存在折叠的情况。
要解决重叠的问题，只需要让他们不存在与同一个 BFC 内即可，对于相邻元素，只要给他们各自都加上 BFC 外壳，就能消除重叠，对于嵌套元素，只需要让父元素触发 BFC 就能消除折叠。
实现自适应布局
由于各个 BFC 之间互不影响，所以当一个浮动元素和 BFC 相邻时，并不会出现覆盖的现象，利用这个特点，可以实现两列或多列的自适应布局。
举个例子，right block 触发了 BFC，它便不会受到 left block 是浮动元素的影响，左列大小变化时，右列也会跟着变化，可以实现自适应布局效果。
CSS 块格式化上下文（BFC）