css3清除浮動的方式有哪些

這篇文章主要介紹“css3清除浮動的方式有哪些”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“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}

關于“css3清除浮動的方式有哪些”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。