正確理解 clear both

要注意以下幾點：

1、浮動元素會被自動設定成塊級元素，相當於給元素設定了display:block（塊級元素能設定寬和高，而行內元素則不可以）。

2、浮動元素後邊的非浮動元素顯示問題。

3、多個浮動方向一致的元素使用流式排列，此時要注意浮動元素的高度。

4、子元素全為浮動元素的元素高度自適應問題。

以下詳細分析四個問題。

一、浮動元素自動變塊級元素

首先說說塊級元素和行內元素區別，簡單的來說，塊級元素獨佔一行，可以設定寬高以及邊距，行內元素不會獨佔一行，設定寬高行距等不會起效。常見的塊級元素有：h1~h6、p、div、ul、table，常見的行內元素有：span、a、input、select等。

示例**：

**如下:

border: solid 1px red; background-color: olive;">浮動元素span

background-color: olive;">浮動元素span

**如下:

margin: 10px 0 0 10px;">

浮動div

跟在浮動元素後邊的div

跟在浮動元素後邊的span

從圖中可以看出來，跟在浮動div後邊的div背景以及邊框被壓在了底下，內容卻沒有，span整體都在浮動div之上顯示。

不過在ie6這個效果卻很怪異，如圖：

第二種辦法，使用萬能clear：

**如下:

.clearfix:after

* html .clearfix

*:first-child + html .clearfix

**如下:

（2）無clear:both的

這樣看，應該就一目了然了：原來後邊的clear:both;其實就是利用清除浮動來把外層的div撐開，所以有時候，我們在將內部div都設定成浮動之後，就會發現，外層div的背景沒有顯示，原因就是外層的div沒有撐開，太小，所以能看到的背景僅限於一條線。

但這種辦法就是最好了的嗎？

我這麼說，當然答案就不是了。可以採用通過hack實現：

複製**

**如下:

test div

**：