万能清除法
程序员文章站
2023-08-30 15:19:53
父元素高度自适应，子元素 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>