BFC 块级格式化上下文

概念：

• 块级格式化上下文；
• BFC是一个独立的布局环境，可以理解为一个容器，在这个容器中按照一定规则进行物品摆放，并且不会影响其它环境中的物品；
• 如果一个元素符合触发BFC的条件，则BFC中的元素布局不受外部影响。

原理：

• BFC内部元素的元素在垂直方向上的边距会发生重叠；

• BFC不会与浮动元素重叠；

• BFC是独立的容器，不会影响里面的元素，里面的元素也不会影响外面元素；

• 计算BFC元素高度时，浮动元素也会参与计算。

触发条件：

• 给元素添加浮动，浮动元素就具有BFC特性

​​​​​​​float: left;

• 给元素添加overflow属性

overflow: hidden；
//或auto，scroll(除了visible);

• 给元素添加display属

display: inline-block；
// flex, inline-flex, table-cell，table-caption;

• 给元素添加定位​​​​​​​

position: absolute;
//fixed

解决问题

1. 防止外边距重叠；
2. 清除浮动的影响；
3. 防止文字环绕。