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元素后面添加了一個空的塊級元素，這個元素清除了浮動*/
}