BFC

概念

BFC 全称 Block Formatting Contexts 块级格式化上下文

BFC 就是一个独立的布局环境，BFC 内部的元素布局与外部互不影响

标准流中的 body 元素本身就是一个天然的 BFC

触发（父元素） BFC 的常见方式

• 设置浮动

• overflow 设置为 auto、scroll、hidden

• position 设置为 absolute、fixed

• display 设置为 inline-block、table-cell

其他的方式见 mdn

BFC 的应用

主要是解决一些布局问题

• 解决浮动元素令父元素高度塌陷的问题

• 解决非浮动元素被浮动元素覆盖的问题（两栏布局常见问题）

• 解决外边距垂直方向重合（取最大）的问题