使用 after 伪类清除浮动

最新推荐文章于 2022-07-06 10:48:33 发布

weixin_34161083

最新推荐文章于 2022-07-06 10:48:33 发布

阅读量112

点赞数

文章标签： python

原文链接：https://my.oschina.net/u/3042303/blog/849133

版权

2019独角兽企业重金招聘Python工程师标准>>>

1 <div style="clear:both;"></div>
或者写在br标签里面来解决，但这样会增加无语义的标签，下面是用after伪类实现，兼容多种浏览器
复制代码
1 .clearfix:after{
2 content:"";
3 display:block;
4 height:0;
5 clear:both;
6 visibility:hidden;
7 }
复制代码
为兼容IE6,IE7,因为ie6,ie7不能用after伪类。加上下面代码
1 .clearfix{zoom:1}
一般情况下，如果父层内部有浮动（float）可能导致父层的高度为0,加上clearfix后就行了
HTML:
1 <div class="parent clearfix">
2 <div class="left">left</div>
3 <div class="right">right</div>
4 </div>
CSS:
复制代码
1 .clearfix{zoom:1}
2 .clearfix:after{
3 content:"";
4 display:block;
5 height:0;
6 clear:both;
7 visibility:hidden;
8 }
9 .parent{
10 background-color:red;
11 width:120px;
12 }
13 .left{
14 float:left;
15 background-color:pink;
16 height:60px;
17 }