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

面试题四:什么是BFC?BFC有什么用?-Qui-Note

什么是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是一个独立容器,并且容器内部不影响外部,计算高度时,定位和浮动都会算在内!