首页 > > 网页制作 > css >

万能清除法

2019-11-21 08:31:51来源：博客园阅读 ()

万能清除法

父元素高度自适应，子元素 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>