css3清除浮動的幾種方式是什麼

方式：1、在空的div標籤中設定「clear:both」樣式來清除浮動；2、為父級元素增加了一個「:after」偽元素，透過清除偽元素的浮動來清除浮動；3、為父元素設定overflow樣式，屬性值不為visible都可以清除浮動。

本教學操作環境：windows10系統、CSS3&&HTML5版本、Dell G3電腦。

css3清除浮動的幾種方式是什麼

浮動（float）可以控制浮動框左右移動，直到遇到另一個浮動框或遇到它外緣的包含框。浮動框不屬於文件流中的普通流，當元素浮動之後，不會影響區塊級元素的佈局，只會影響內聯元素佈局。

此時文件流程中的普通流就會表現得該浮動框不存在一樣的佈局模式。當包含框的高度小於浮動框的時候，此時就會出現「高度塌陷」：

#上圖中父元素撐開的高度是padding帶來的效果，父元素沒有設定高度。

在父元素沒有設定高度的情況下：

如果父元素裡的子元素沒有設定浮動，那麼父元素的高也會自動被撐開的，出現高度值；

如果父元素裡的子元素設定了浮動，那麼父元素的高就不會自動被撐開的，也就沒有高度值。

顯然這樣設定浮動後出現了一些問題，例如：

父元素的margin受到影響，無法實現上下左右居中，

若沒有給父元素設定高度，浮動後父元素的高度沒有被撐開，那麼父元素就不會在顯示屏上顯示。

css如何清除浮動？清除浮動的幾種方式是什麼？

（1）使用clear:both清除浮動

#在程式碼中在放一個空的div標籤，然後給這個標籤設定clear:both來清除浮動對頁面的影響。它的優點是簡單，方便相容性好，但是一般情況下不建議使用該方法，因為會造成結構混亂，不利於後期維護

<div style="clear: both"></div>

（2）利用偽元素:after來清除浮動

為父級元素添加了一個:after偽元素，透過清除偽元素的浮動，達到撐起父元素高度的目的

.clearfix:after{
    content:"";
    display:block;
    visibility:hidden;
    clear:both;
    }

（3 ）使用CSS的overflow屬性

當給父元素設定了overflow樣式，不管是overflow:hidden或overflow:auto都可以清除浮動只要它的值不為visible就可以了，它的本質就是建構了一個BFC，使得達到撐起父元素高度的效果

.box{border:1px solid #ccc;background:#eff2f4;overflow: auto}

（學習影片分享：css影片教學）

以上是css3清除浮動的幾種方式是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！