bfc与margin折叠问题

边距折叠

边距折叠只会发生在上下边距，左右边距是不会发生折叠的
边距折叠只发生邻接的上下边距中，也即兄弟节点或者父子节点
发生边距折叠的两个节点必须同处于一个bfc布局中
发生边距折叠的两个节点没有border或者padding隔开
只有普通文档流中块框的垂直外边距才会发生外边距合并，行内框、浮动框或绝对定位之间的外边距不会合并。

bfc

bfc的作用:

两列布局
通过使父元素bfc化，清楚内部浮动
通过使元素处于不同的bfc布局中，防止margin合并
包裹浮动的元素和margin，使内部元素不影响元素本身的margin和其他的元素的布局

bfc的形成:

根元素，即HTML元素
float的值不为none
overflow的值不为visible
display的值为inline-block、table-cell、table-caption
position的值为absolute或fixed