通過指定CSS屬性float的值,從而使元素向左或向右浮動,然后由后繼元素向上移動以填補前面元素的浮動而空出的可用空間。CSS的float屬性，作用就是改變塊元素對象的默認顯示方式，HTML標簽設置了float屬性之后，它將不再獨自占據(jù)一行，從而可以實現(xiàn)多個元素同處一行的效果。Float的功能很強大，但是如果沒有好好掌握而使用很可能會成為你調試樣式的噩夢。

使用Float樣式，如果沒有清除浮動，那么有浮動元素的父元素容器將無法自動撐開。如果沒有清除內部浮動，此時會導致浮動的父元素無法自動撐開到本身應有的高度。也就是說：當一個元素是浮動的，如果沒有關閉浮動時，其父元素不會包含這個浮動元素，因為此時浮動元素從文檔流中脫離。

所以需要在樣式定義的后面進行清除浮動，清除浮動的方法有幾種：

Clear:both清除浮動

clear清除浮動主要是借用clear屬性來清除浮動，這是一種比較陳舊的清除浮動方法，但是感覺一般遇到這種問題都會用這種方法去清除浮動。使用clear:both來清除浮動，我們需要在需要清除浮動地方的后面緊接著增加一個額外元素，比如說一個div標簽，并且定義他們的樣式為“clear:both”,其通常使用的結構方式如下：

<div class=”demo A”>
<div class=”demoB demoFloat”>float left</div>
<div class=”demoC demoFloat”>float right</div>
<div class=”demoD demoFloat”>not float</div>
<div class=”clear”></div>
</div>

<pre name=”code” class=”css”> .clear {
clear:both;/*主要使用這個屬性來清除浮動*/
/*為了不讓ie具有一定的空間，個人建議加上下面三個屬性*/
height: 0;
line-height: 0;
font-size: 0;
}</pre>
<pre></pre>
<p></p>
<pre></pre>
<p></p>
<h4 style=”margin:0px; line-height:30px; color:rgb(81,177,72); font-family:’Microsoft Yahei'”><a name=”t1″></a>
<span style=”white-space:pre”></span>2.使用overflow</h4>
<p style=”margin-top:0px; margin-bottom:9px; color:rgb(64,64,64); font-family:’Microsoft Yahei’; line-height:28px”>
<span style=”white-space:pre”></span>用overflow方法來清除浮動相對來說比較簡單，只需要在有浮動的元素上面加上下面的屬性：</p>
<p style=”margin-top:0px; margin-bottom:9px; color:rgb(64,64,64); font-family:’Microsoft Yahei’; line-height:28px”>
</p><pre name=”code” class=”css”> .A {
overflow: auto;