萬能清除法

時間 2019-11-21

標籤萬能清除简体版

原文原文鏈接

父元素高度自適應，子元素 float 後，形成父元素高度爲0，稱爲高度塌陷問題。html

推薦使用萬能清除法解決。（給須要清除浮動的元素添加一個class名 clear）spa

萬能清除法代碼code

	父元素:after{
		content: "";
		height: 0;
		clear: both;
		overflow: hidden;
		display: block;
		visibility: hidden;
	}

小示例htm

 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>

相關標籤/搜索