在css中，我們通過(guò)float屬性實(shí)現(xiàn)元素的浮動(dòng)。（更多float屬性的內(nèi)容可以參考css手冊(cè)）

    上面所說(shuō)的意思似乎也是云里來(lái)霧里去，那么下面我們就來(lái)來(lái)通俗的解釋一番。

    要知道在css中一些元素是塊級(jí)元素，他們會(huì)自動(dòng)啟用新的一行（塊級(jí)元素參考文章：css塊級(jí)元素的定義是什么？css塊級(jí)元素有哪些？），還有另一種內(nèi)聯(lián)元素也就是行內(nèi)元素，它們會(huì)與之前的內(nèi)容保持顯示在“一行”（行內(nèi)元素參考文章：css行內(nèi)元素有哪些？css塊級(jí)元素和行內(nèi)元素的區(qū)別）；但是有時(shí)候我們需要改變這種布局方式，這就需要利用css浮動(dòng)來(lái)實(shí)現(xiàn)。

    css浮動(dòng)允許給定的元素挪動(dòng)到它那一行的一側(cè)，并且其他內(nèi)容向下流動(dòng)。一個(gè)右浮動(dòng)的元素將被推動(dòng)直到它的容器的右側(cè)，并且內(nèi)容會(huì)沿著它的左側(cè)向下流動(dòng)，一個(gè)有浮動(dòng)的元素會(huì)被挪動(dòng)到左側(cè)，內(nèi)容會(huì)沿著它的右側(cè)向下流動(dòng)。

    看完了css浮動(dòng)的意思后，我們就來(lái)看看css為什么需要清除浮動(dòng)？

    二、css為什么要清除浮動(dòng)？

    通過(guò)上面css浮動(dòng)是什么意思的講解后，我們知道css浮動(dòng)在某些情況下是必須要存在的，那么為什么要清除浮動(dòng)呢？

    我們要知道：浮動(dòng)的框可以左右移動(dòng)，直到遇到另一個(gè)浮動(dòng)框或者遇到它外邊緣的包含框。浮動(dòng)框不屬于文檔流中的普通流，當(dāng)元素浮動(dòng)之后，不會(huì)影響塊級(jí)元素的布局，只會(huì)影響內(nèi)聯(lián)元素布局。此時(shí)文檔流中的普通流就會(huì)表現(xiàn)得該浮動(dòng)框不存在一樣的布局模式。當(dāng)包含框的高度小于浮動(dòng)框的時(shí)候，此時(shí)就會(huì)出現(xiàn)“高度塌陷”。這時(shí)就需要來(lái)實(shí)行清除浮動(dòng)。

    簡(jiǎn)單點(diǎn)來(lái)說(shuō)：

    比如：如果不清除浮動(dòng)就會(huì)出現(xiàn)div重疊的問(wèn)題。你做了一個(gè)網(wǎng)頁(yè)，最上面是一個(gè)header塊，中間有兩列內(nèi)容塊，最下面是一個(gè)footer塊。你在中間內(nèi)容塊的時(shí)候設(shè)置了左浮動(dòng)，且兩塊的高度不一致，有一塊要高一些，那么在footer就需要清除浮動(dòng)，如果不清除浮動(dòng)的話，footer塊就會(huì)與其中一個(gè)內(nèi)容重疊

“css清除浮動(dòng)的原因是什么”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！