空间塌陷

设置浮动的子元素，会脱离原来的文档流，原先占据的空间会被释放，相应父元素的高度会丢失(变成0)，由此造成的问题，被称作空间塌陷。

例如：

<body>
    <div class="parent">
        <div class="child" id="child1"></div>
        <div class="child" id="child2"></div>
        <div class="child" id="child3"></div>
    </div>
    <div class="other"></div>
</body>

在未设置浮动时的情况大致如下：

.child{
    float：left;
}

设置浮动后：

可以看到，浮动后的父元素高度为0（红色），子元素的宽高由元素本身撑开；而原本应该在下面的other占据了父元素原来的高度。

解决空间塌陷的方法：

父元素设置溢出隐藏

原理是触发了BFC

.father{
    overflow:hidden;
}

给父元素设置高度

.father{
    height:100px;
}

给父元素新增一个子元素（最后一个）并且清除浮动

#child4{
    width:0;
    height:0;
    clear:both;
}

父元素设置clearfix类

原理同3,只是将需要清除浮动的元素进行了批处理

/*给父元素新增class属性clearfix*/
.clearfix::after{
    content: '';
    display: block;
    clear: both;
}

元素浮动会造成什么问题，怎么解决？

空间塌陷

解决空间塌陷的方法：