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

BFC

BFC：“块级格式化上下文”，是一种盒模型的渲染规则。

BFC渲染规则

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

那么，怎么创建BFC呢？

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

转载于:https://juejin.im/post/5a797e835188257a821112f1