清除浮动

清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 塌陷的问题。

清除浮动的方法

在CSS中，clear属性用于清除浮动，其基本语法格式如下：

选择器{clear:both;}

额外标签法

通过在浮动元素末尾添加一个空的标签（块级元素）例如

<div style=”clear:both”></div>，或则其他标签br等亦可。

父级添加overflow属性方法

可以给父级添加： overflow为 hidden|auto|scroll 都可以实现。

使用after伪元素清除浮动(常用)

:after方式为空格元素的升级版，好处是不用单独加标签了
在需要清除浮动的元素中加类名.clearfix使用伪元素来清除浮动
使用方法：

  .clearfix:after {  
   content: "";
   display: block;
   height: 0;
    /* 隐藏元素  */
   visibility: hidden;
   /* 清除浮动 */
   clear: both;
    }   
    /* 兼容低版本ie浏览器 */
 .clearfix {*zoom: 1;}  

使用before和after双伪元素清除浮动

使用方法：

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

CSS清除浮动

原文：https://www.cnblogs.com/wenyongjie/p/12380997.html