CSS解决高度塌陷的各种方法

在文档流中，父元素的高度默认是被子元素撑开的，子元素多高父元素就多高，当子元素设置浮动之后，子元素会完全脱离文档流，此时会导致子元素无法撑起父元素的高度，从而使父元素的高度塌陷

方法一：

在父元素中加入overflow:auto，打开BFC即可，或者加入overflow:hidden

方法二：

用clear属性来清除其他浮动元素对当前元素的影响，clear里面的值分别为left（清除左侧浮动）、right（清除右侧浮动）、both（清除左右两侧浮动）、none（默认值，允许浮动元素出现在两侧）、inherit（规定应该从父元素继承 clear 属性的值）。
比如直接在高度塌陷的父元素的最后面添加一个空白的块元素，然后对其清除浮动

.box {
     clear:both;
     }

方法三： （推荐使用）

通过after伪类在元素的最后添加一个空白的块元素，然后对其清除浮动

.box:after {
     content:" ";/*添加一个内容*/
     display:block;/*转换为一个块元素*/
     clear:both;
     }