万能清除法

父元素高度自适应，子元素 float 后，造成父元素高度为0，称为高度塌陷问题。

推荐使用万能清除法解决。（给需要清除浮动的元素添加一个class名  clear）

万能清除法代码

?
1
2
3
4
5
6
7
8
父元素: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>
复制代码

 

posted @   野鹤亦闲云  阅读(1676)  评论(0)  编辑  收藏  举报
点击右上角即可分享
微信分享提示