BFC与高度崩塌

什么是BFC

BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干

产生条件

1.The value of float is not none

2.The value of position is neither static nor relative

3.The value of display is table-cell, table-caption, inline-block, flex, or inline-flex

4.The value of overflow is not visible.

高度崩塌

子元素设置了float属性脱离文档流从而无法撑起父父容器高度。

margin崩塌

外margin无法显示

解决

1.clear

在最后设置一个空元素其属性clear:both

2.父容器overflow:auto/hidden

3.父容器display:flow-root