一：float初印象

float是h5中css樣式中的一個屬性，float 屬性定義元素在哪個方向浮動。

屬性值

以往這個屬性總應用于圖像，使文本圍繞在圖像周圍。

代碼

效果圖

拓展：當文本內容是英文時，上面的代碼運行結果會出現問題，如下：

?代碼

效果

導致此現象的原因以后會詳細說明，解決辦法是給p標簽設置一個css樣式即可：

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?? ?word-break: break-all;

效果圖

需要了解的是現在基本上已經遺棄了float的此種用法，隨著技術的發展和完善，float更多的是用作對元素位置的浮動以達到我們想要的目的。下面我們側重談談float屬性對行、塊級標簽的總用和影響。

二：float屬性對塊級元素的影響

①簡單舉個例子：

效果圖

在一個有著10px邊框，寬600px(隨便設的，沒特殊含義)的.divOut里裝一個寬高100px的.divIn，此時.divOut的高被.divIn撐起，現在給divIn設置

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?float: right;

效果圖

會發現.divOut此時高為0，說明浮動讓.divIn脫離了文檔流，不能再撐起父級元素的高度，這種現象我們叫做 ?頁面塌陷 ?(解決方案后面說)。

②當有多個元素時：

例子

我們給粉色和藍色div設置

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? float: right;

效果圖

可以發現浮動元素向著浮動方向移動，直到碰見邊界或者其他浮動元素時停下，且浮動元素原來的位置會被后面相鄰的非浮動元素填充，使父級的高度受到一定的影響，大多數情況下這都不是我們愿意看到的。

三：清浮動(消除(頁面塌陷)float屬性對父級元素的影響)

①給父級一個高度，如二中第一個例子，給.divOut設置

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? height：100px；

效果圖

由于我們最開始并不知道某一部分內容的高度，讓這種方法大打折扣。

②clear屬性

屬性值

特點：只能清除之前元素的浮動問題。

這就要求我們要在最后面添加一個新元素用于清除前面的浮動問題

③偽類清浮動。

問題圖

設置三個一樣大小的div，全部設置左浮動

偽類清浮動

?效果圖

了解以上兩種方法的弊端，很容易理解此種方法的好處，這也是如今主流的清浮動的方法，偽類的用法很多，這只是一小部分，以后會挑一些常用的作詳細說明。