清除浮动的四种方法

1.额外标签法：（在最后一个子元素浮动标签后，新加一个标签，给其css设置clear：both；）（添加无意义标签，语义化差，不推荐）

2.父级添加overflow属性（父元素添加overflow:hidden，前提父元素要有宽度，如果要适配ie6浏览器还需要加*zoom：1）（内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素，不推荐）

3.使用after伪元素清除浮动（推荐使用）clearfix添加给父元素

.clearfix:after{
content: "";
display: block;
height: 0;
clear:both;
visibility: hidden;
}
.clearfix{
*zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
}

4.使用before和after双伪元素清除浮动，同样给父元素添加样式

.clearfix:after,.clearfix:before{
content: "";
display: table;
}
.clearfix:after{
clear: both;
}
.clearfix{
*zoom: 1;
}

标签：浮动,元素,clearfix,清除,after,添加,标签,四种
来源： https://www.cnblogs.com/JC30705/p/14979144.html