万能清除法
父元素高度自适应，子元素 float 后，造成父元素高度为0，称为高度塌陷问题。
推荐使用万能清除法解决。（给需要清除浮动的元素添加一个class名 clear）
父元素:after{
content: "";
height: 0;
clear: both;
overflow: hidden;
display: block;
visibility: hidden;
}
小示例
<style> .con{ /* height:400px; */ width:400px; background:purple; margin:20px; } .box{ height:200px; width:200px; background:pink; float: left; } .xia{ height:300px; width:300px; background:yellow; } /* 万能清除法 */ .clear:after{ content: ""; height: 0; clear: both; overflow: hidden; display: block; visibility: hidden; } </style> <body> <div class="clear con"> <div class="box"> </div> </div> <div class="xia"> </div> </body> </html>