前端小知识储备（二）：BFC

BFC

BFC&＃xff1a;“块级格式化上下文”&＃xff0c;是一种盒模型的渲染规则。

BFC渲染规则

1. 在BFC元素中&＃xff0c;垂直方向上的margin会发生重叠&＃xff08;取最大值&＃xff09;。
2. BFC元素是独立的容器&＃xff0c;外面的元素和里面的元素互不影响。
3. BFC元素不会和浮动元素重叠&＃xff08;可用于两栏自适应布局&＃xff09;。
4. 计算BFC元素的高度时&＃xff0c;里面浮动元素的高度也会参加计算。
5. 内部的盒子会在垂直方向依次放置。

那么&＃xff0c;怎么创建BFC呢&＃xff1f;

1. 根元素html就是一个BFC容器。
2. float属性不为none
3. overflow:hidden/auto/scroll
4. position属性不为static,relative
5. display:table-cells,inline-block,flex