css使用伪元素来清除浮动
由于IE 浏览器 还没有被完全抛弃 项目中还是不能完全使用弹性布局flex 只能使用浮动 进行排版布局float 浮动是脱离文档流 就会出现乱版 所以要清除浮动带了的影响
方法一:添加新的元素 、应用 clear:both;
每当写完float 就需要添上新标签 加上 clear:both;相当的繁琐 不推荐使用
方法二:父级div定义 overflow
在父级使用overflow属性来清除浮动有一点需要注意,overflow属性共有三个属性值:hidden,auto,visible。我们可以使用hiddent和auto值来清除浮动
方法三: 使用伪元素来清除浮动
经常使用这种方法清除浮动 使用伪元素来清除浮动:after
<div class="container clearfix"> <div class="wrap">aaa</div> </div> .clearfix:after{ content:""; /*设置内容为空*/ height:0; /*高度为0*/ line-height:0; /*行高为0*/ display:block; /*将文本转为块级元素*/ visibility:hidden; /*将元素隐藏*/ clear:both; /*清除浮动*/ } .clearfix{ zoom:1; /*为了兼容IE*/ }
清除浮动的方法 还有很多 这里只是简单的列举了一些