CSS浮動float

參考教程（經驗分享：CSS浮動(float,clear)通俗講解）

首先了解一下標準文檔流的排版：從上到下，從左到右，遇塊換行

---

浮動能夠理解爲讓某個div元素脫離文檔流，漂浮在文檔流之上

block元素無視float元素

啥意思呢，就是A和B兩個block(塊級)元素在排隊買東西，A在前面，那麼B只能遵照規則（標準文檔流的遇塊換行）忽然A膨脹了，飄了，而後B就無視A,前進一步跑到A下面。

下圖就是這種狀況。

​ but，若是此時A沒有浮動，而B浮動了，此時他只漂浮在本身的位置上方。從俯視圖看彷佛沒有脫離文檔流。

​

inline元素像流水同樣圍繞着float元素

行內元素會圍繞着浮動的元素進行排列

清除浮動能夠理解爲打破橫向排列。

​ 語法：

​ clear : none | left | right | both

​ 取值：

​ none : 默認值。容許兩邊均可以有浮動對象

​ left : 不容許左邊有浮動對象

​ right : 不容許右邊有浮動對象

​ both : 不容許有浮動對象

例子：

假如頁面中只有兩個元素div一、div2，它們都是左浮動，場景以下：

若是想要清除浮動，不少人在div1的CSS樣式中添加clear:right;然而這樣子是沒有用的。

對於CSS的清除浮動(clear)，必定要牢記：這個規則只能影響使用清除的元素自己，不能影響其餘元素。

因此在div2中CSS樣式中添加clear:left;`

這時候才能夠生效