万能清除法

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

新老客户大回馈,云服务器低至5折

万能清除法

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

 


原文链接:https://www.cnblogs.com/xiaoyaolang/p/11905594.html
如有疑问请与原作者联系

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:iframe子元素无法全屏

下一篇:文字溢出省略