css浮動是什麼意思？ css為什麼要清除浮動？

在css中，我們透過float屬性實現元素的浮動。 （更多float屬性的內容可以參考css手冊）

上面所說的意思似乎也是雲裡來霧裡去，那麼下面我們就來來通俗的解釋一番。

要知道在css中一些元素是塊級元素，他們會自動啟用新的一行（塊級元素參考文章：css塊級元素的定義是什麼？css塊級元素有哪些？），還有另一個內聯元素也就是行內元素，它們會與先前的內容保持顯示在「一行」（行內元素參考文章：css行內元素有哪些？css區塊級元素和行內元素的區別）；但是有時候我們需要改變這種佈局方式，這就需要利用css浮動來實現。

css浮動允許給定的元素挪動到它那一行的一側，並且其他內容向下流動。一個右浮動的元素將被推動直到它的容器的右側，並且內容會沿著它的左側向下流動，一個有浮動的元素會被挪動到左側，內容會沿著它的右側向下流動。

看完了css浮動的意思後，我們就來看看css為什麼需要清除浮動？

二、css為什麼要清除浮動？

透過上面css浮動是什麼意思的講解後，我們知道css浮動在某些情況下是必須要存在的，那麼為什麼要清除浮動呢？

我們要知道：浮動的框可以左右移動，直到遇到另一個浮動框或遇到它外緣的包含框。浮動框不屬於文件流中的普通流，當元素浮動之後，不會影響區塊級元素的佈局，只會影響內聯元素佈局。此時文檔流程中的普通串流就會表現得該浮動框不存在一樣的佈局模式。當包含框的高度小於浮動框的時候，此時就會出現「高度塌陷」。這時就需要來實施清除浮動。

簡單點來說：

例如：如果不清除浮動就會出現div重疊的問題。你做了一個網頁，最上面是一個header區塊，中間有兩列內容區塊，最下面是一個footer區塊。你在中間內容塊的時候設置了左浮動，且兩塊的高度不一致，有一塊要高一些，那麼在footer就需要清除浮動，如果不清除浮動的話，footer塊就會與其中一個內容重疊，如圖：

相關推薦：

css浮動是什麼意思？ css浮動的原理以及css清除浮動的方法（附程式碼）

#什麼是浮動?css清除浮動的原理