CSS清除浮动

清除浮动方式有如下几种：

(1) 为 float 元素后的元素添加 clear 属性 不推荐,会添加额外的元素，会添加大量的无语义的html元素，不易于后期维护。 不推荐；

<div class="container">     
     <div  class="item1">item1</div>
     <div  class="item2">item2</div>     
     <div  style="clear: both;"></div>
</div>

（2.1）利用伪元素，after  推荐

<div class="container clearfix">     
     <div  class="item1">item1</div>
     <div  class="item2">item2</div>     
     <div  style="clear: both;"></div>
</div>
// 现代浏览器clearfix方案，不支持IE6/7
.clearfix:after {
    content: "020";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden; 
}
.clearfix {
    /* 触发 hasLayout */
    zoom: 1;
}

(2.2) 利用伪元素，before and after 推荐

// 全浏览器通用的clearfix方案【推荐】
// 引入了zoom以支持IE6/7
// 同时加入:before以解决现代浏览器上边距折叠的问题
.clearfix:before,
.clearfix:after {
    display: table;
    content: " ";
}
.clearfix:after {
    clear: both;
}
.clearfix{
    *zoom: 1;
}

(3) 修改父元素的 owerflow 属性,但是可能会导致某些数据无线显示完整，不推荐 触发BFC

<div class="container">     
     <div  class="item1">item1</div>
     <div  class="item2">item2</div>     
     <div  style="clear: both;"></div>
</div>

.container {   overflow:auto|hidden;
   *zoom: 1; // 引入了zoom以支持IE6/7
}

(4) 给浮动的元素的容器添加浮动 不推荐使用，触发BFC

<div class="container">     
     <div  class="item1">item1</div>
     <div  class="item2">item2</div>     
     <div  style="clear: both;"></div>
</div>

.container {   
   float: left|right
}

通过上面的例子，我们不难发现清除浮动的方法可以分成两类：

• 一是利用 clear 属性，包括在浮动元素末尾添加一个带有 clear: both 属性的空 div 来闭合元素，其实利用 :after 伪元素的方法也是在元素末尾添加一个内容为一个点并带有 clear: both 属性的元素实现的。

• 二是触发浮动元素父元素的 BFC (Block Formatting Contexts, 块级格式化上下文)，使到该父元素可以包含浮动元素，关于这一点