父元素高度自適應，子元素 float 後，造成父元素高度為0，稱為高度塌陷問題。 推薦使用萬能清除法解決。（給需要清除浮動的元素添加一個class名 clear） 萬能清除法代碼 父元素:after{ content: ""; height: 0; clear: both; overflow: hi ...
父元素高度自適應，子元素 float 後，造成父元素高度為0，稱為高度塌陷問題。
推薦使用萬能清除法解決。（給需要清除浮動的元素添加一個class名 clear）
萬能清除法代碼
父元素:after{
content: "";
height: 0;
clear: both;
overflow: hidden;
display: block;
visibility: hidden;
}
小示例
1 <style> 2 .con{ 3 /* height:400px; */ 4 width:400px; 5 background:purple; 6 margin:20px; 7 } 8 .box{ 9 height:200px; 10 width:200px; 11 background:pink; 12 float: left; 13 } 14 .xia{ 15 height:300px; 16 width:300px; 17 background:yellow; 18 } 19 /* 萬能清除法 */ 20 .clear:after{ 21 content: ""; 22 height: 0; 23 clear: both; 24 overflow: hidden; 25 display: block; 26 visibility: hidden; 27 } 28 </style> 29 <body> 30 <div class="clear con"> 31 <div class="box"> 32 33 </div> 34 </div> 35 <div class="xia"> 36 37 </div> 38 </body> 39 </html>
