html和css绕来绕去就那么多问题，这不又来一个老问题：什么是BFC？，这个问题依旧是考验的CSS的渲染规则：Block formatting context;

面试题四:什么是BFC？BFC有什么用？-QUI-Notes

什么是BFC？

BFC 块级格式化上下文 (Block Formatting Context)，是css渲染规则之一  。一个BFC盒子是独立布局的，盒子里面的子元素布局不会影响到外面的元素。在同一个 BFC 中的两个毗邻的块级盒在垂直方向（和布局方向有关系）的 margin 会发生折叠。

BFC 触发条件：

html的根元素，html本身就是一个BFC盒子；
float属性不为none；
position为absolute或fixed；
display为inline-block, table-cell, table-caption, flex, inline-flex；
overflow不为visible；

BFC有什么用？

块级化上下文，防止页面父级高度崩塌，防止元素之间间距重叠，BFC内块级元素在垂直方向依次排列，BFC是一个独立容器，并且容器内部不影响外部，计算高度时，定位和浮动都会算在内！