css高度塌陷

什么是高度塌陷？

父元素没有设置宽高，子元素多高，父元素就多高，子元素设置了浮动，如果下面的与父元素同级的元素没有设置浮动，那就跟这个子元素重叠，是因为这个子元素脱离了文档流。不按一行一行地显示。

脱离文档流：

元素不按照自上而下，从左到右排列，在文档流中不占据空间，处于浮动状态。

导致脱离文档流的因素：

（1）浮动 float

（2）绝对定位 display：absolute;

  (3)display:fixed;

以第一种情况为例：

预期情况：

结果：

 

这样会造成页面混乱。

解决方案：

方案一：给父盒子加上宽高，占住那个位置。

方案二：先添加一个内容，让父它变成块级元素，最后再清除两侧浮动。

.box1::after{
    content:"";
    display:block;
    clear:both;
}