如何清除浮动

1.1 浮动规律

• 如果浮动元素的上一个元素也是浮动，那么该元素会与上一个元素排列在同一行，如果行宽不够，后面的元素会被挤到下一行；
• 如果浮动元素的上一个元素不是浮动，那么该元素仍然处于上一个元素的下方，根据浮动设置在左或者在右，而其本身也脱离文档流，后边的元素也会自动往上移动到上一个文档流块元素下方为止。

1.2 高度塌陷

当没有制定高度的父元素中的子元素全部都浮动时，父元素中内部高度因为是普通流中的块元素撑起来的，所以这个时候父元素的高度会变为0，或者会有部分浮动元素的位置会超出父元素的高度之外。这种现象，叫做“高度塌陷”。

如下：每个列表项元素都设置了float:left，且列表元素没有设置具体高度值，所以出现了“高度塌陷”。

//HTML  

<ul className="float-list">  
    <li className="item">1</li>  
    <li className="item">2</li>  
    <li className="item">3</li>  
    <li className="item">4</li>  
    <li className="item">5</li> 
</ul> 

//Css
.float-list{ 
    padding: 10px; 
    border: 1px solid #41c134; 
    list-style: none;
} 

.float-list .item{ 
    width: 100px; 
    height: 100px;  
    background-color: #3456c1;  
    float: left;  
    border: 1px solid #e93124;
} 

1.3 如何清除浮动？

（1）clear

• 在浮动元素后使用一个空元素如<div class="clear"></div>，并在 CSS 中赋予：clear{clear:both;}属性即可清理浮动；
• 亦可使用<br class="clear" />或<hr class="clear" />来进行清理。

优点: 简单，代码少，浏览器兼容性好

缺点: 需要添加大量无语义的 HTML 元素，代码不够优雅，后期不容易维护。

//HTML  

<ul className="float-list">  
    <li className="item">1</li>  
    <li className="item">2</li>  
    <li className="item">3</li>  
    <li className="item">4</li>  
    <li className="item">5</li> 
    <br class="clear" /> 
</ul> 

//Css
.clear{
    clear:both;    
}

 (2)overflow 

• ​ 给浮动元素的容器添加 overflow:hidden;或 overflow:auto;可以清除浮动。
• ​ 另外在 IE6 中还需要触发hasLayout，例如为父元素设置容器宽高或设置 zoom:1。在添加 overflow 属性后，浮动元素又回到了容器层，把容器高度撑起，达到了清理浮动的效果。

​ 优点：这种方法比第一种方法稍微好用点，不需要改动到 HTML 结构，只需要给 容器元素添加 CSS 属性，代码如下:

缺点：给浮动的元素的容器添加浮动 ，给浮动元素的容器也添加上浮动属性即可清除内部浮动，但是这样会使其整体浮动，影响布局，不推荐使用。

.oat-list{  
    padding: 10px;  
    border: 1px solid #41c134; 
    list-style: none;  
    overflow: hidden;  
    *zoom: 1;
}

（3）:after 伪元素

结合:after 伪元素和 IEhack，可以完美兼容当前主流的各大浏览器。IEhack 指的是触发 hasLayout。

• 给浮动元素的容器添加一个 clearfix 的 class，然后给这个 class 添加一个:after 伪元素实现元素末尾添加一个 看不见的块元素清理浮动。

这种是最推荐的清除浮动用法。

.float-list:after{  
    content: "020";  
    display: block;  
    height: 0;  
    clear: both;  
    visibility: hidden;
}