CSS 使用伪元素清除浮动

 原理：

          Html每一个标签前后都会存在前后节点::before、::after,

          前后节点设置一个块状空元素来清空容器的浮动效果；

 

实现：

<div class='clearfix'></div>       //空元素

.clearfix{
  zoom:1  /*兼容IE浏览器6、7低版本*/

  content:"";
  height: 0;
  line-height: 0;
  display: block;
  clear: both;
  visibility: hidden;/*将元素隐藏起来*/
  /*在页面的clearfix元素后面添加了一个空的块级元素，这个元素清除了浮动*/

}

 Or

.clearfix{
  zoom:1  /*兼容IE浏览器6、7低版本*/
}

.clearfix ::before{
  content:"";
  height: 0;
  line-height: 0;
  display: block;
  clear: both;
  visibility: hidden;/*将元素隐藏起来*/
  /*在页面的clearfix元素后面添加了一个空的块级元素，这个元素清除了浮动*/
}

Or

.clearfix{
  zoom:1  /*兼容IE浏览器6、7低版本*/
}

.clearfix::after{
  content:"";
  height: 0;
  line-height: 0;
  display: block;
  clear: both;
  visibility: hidden;/*将元素隐藏起来*/
  /*在页面的clearfix元素后面添加了一个空的块级元素，这个元素清除了浮动*/
}