CSS清除浮动float的两种方法（可加额外元素div可不加）

　　用 CSS 修饰网页少不了要使用浮动（float），用浮动往往会出现一个问题：上一行的浮动影响下一行，即下一行显示到上一行的右边（float:left 的情况下），这个时候就要清除浮动，以使下一行正常显示到上一行的下面。

　　一般来说，CSS清除浮动的方法有两种，一种方法是在浮动层的下面额外加元素div专门清除浮动，另一种是不有用额外加div，直接在CSS中定义好就不会出现下一行显示到上一行右边了。

　　一、CSS清除浮动方法一：加额外元素div

　　html代码：

　　<ul type="floatTest"><li>CSS清除浮动方法一：加额外元素div</li><li>float:left</li></ul>
　　<div>未清除浮动，显示到上一行右边</div>

　　CSS样式：

　　.floatTest{margin:6px;} .floatTest li{float:left; margin-right:10px; list-style:none;}

　　由于 ul 的 li 在 CSS 中设置了左边浮动，所以 div 会浮动到 ul 的右边，与要求显示在 ul 的下边不符，这就要求清除 li 的浮动对它的影响，只需加一个清除浮动的div即可。

　　html代码修改为：

　　<ul type="floatTest"><li>CSS清除浮动方法一：加额外元素div</li><li>float:left</li></ul>
　　<div class="clear"></div>
　　<div>浮动被清除</div>

　　CSS样式加添：

　　.clear{clear:both;}

　　这样浮动被清除，div显示到 ul 的下面，满足要求。

　　二、CSS清除浮动方法二：不需加额外元素div

　　html代码：

　　<ul type="floatTest"><li>CSS清除浮动方法二：不需加额外元素div</li><li>float:left</li></ul>
　　<div>用 overflow:hidden 清除浮动</div>

　　CSS样式加添：

　　.floatTest{margin:6px; overflow:hidden;} .floatTest li{float:left; margin-right:10px; list-style:none;}

　　在 ul 的 CSS 样式中加了 overflow:hidden，div 就不会浮动到 ul 的右边，正常显示下 ul 下面。这种方法比第一种方法好，不需要额外加 div。