BFC小结

BFC:Block Formatting Context 的缩写，块级格式化上下文。

BFC是页面中CSS渲染的一个部分，主要用于决定盒子的布局和浮动（相互影响的范围）的一个区域，BFC之间相互不影响。

1、如何触发BFC?

A、根元素

B、Float值不为none时

C、position为absolute或者fixed时

D、display为inline-block、table-cell、table-caption、flex、inline-flex

E、overflow不为visible

2、触发BFC时，BFC的布局规则

A、内部的块级元素在垂直方向，一个接一个放置。

B、块级元素垂直方向上margin重叠取最大值（同一BFC中相邻元素）

C、每个元素的margin box 的左边与包含块的border box 的左边想接壤（浮动也是如此）

D、BFC的区域不会与float box 重叠

E、BFC是一个独立的区域，容器中的子元素不能影响外面的元素。

F、计算BFC的高度时，浮动元素也要参与计算（加overflow：hidden）

G、BFC只控制子元素，不控制自身