万能清除法
父元素高度自适应,子元素 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>