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*/
}

清除浮动的方法 还有很多 这里只是简单的列举了一些