清除浮動的幾種方法

2021-07-26 13:45:22 字數 1283 閱讀 3087

當我們使用float後,發現父級元素沒有被撐開， 通常情況下需要清除浮動，以下介紹三種清除浮動的方法：

1. 使用overflow：hidden將元素變成bfc，即可清除內部浮動

.box


.child


style>


class="box">


class="child">


div>


class="child">


div>


div>


body>



.box
為達到清除內部浮動，我們可以觸發box生成bfc，那麼box在計算高度時，box內部的浮動元素child也會參與計算。

2 . 偽元素

.clearfix


:after


.clearfix


.child


style>


class="clearfix">


class="child">


div>


class="child">


div>


div>


body>
這個css的原理是經過使用after偽物件,它將在應用clearfix的元素結尾新增content中的內容,也就是乙個」.」,並且把他設定為塊級元素(display=」block」);高度設定為0,clear=」both」,然後將其內容隱藏掉(visibility=」hidden」).這樣就會撐開此塊級元素。

ie下

.clearfix
3 . 使用空標籤

.box


.child


style>


class="box">


class="child">


div>


class="child">


div>


style="clear: both;">


div>


div>


body>
在浮動標籤的下新增乙個空的兄弟元素，設定clear:both

清除浮動的幾種方法

1.浮動元素下加空div 為了統一樣式，我們新建乙個樣式選擇器class命名為 clear 並且對應選擇器樣式為 clear both 然後我們在父級 結束前加此div引入class clear 樣式。這樣即可清除浮動。這個class 清除float產生浮動，可以不用對父級設定高度 也無需技術父級高...

清除浮動的幾種方法

當元素浮動時，他將不再處於普通文件流中，相當於浮在文件之上，不佔據空間，但是會縮短行寬，產生文字環繞的效果。浮動帶來的影響 1，父級的高度塌陷 2.背景不能顯示 3.變框不能撐開 4.margin值不能正確顯示 5.產生文字環繞的效果 6.由於脫離文件流，不佔位，而後面的元素未脫離文件流導致後面的元...

清除浮動的幾種方法

style float left 為了解決container容器高度塌陷問題，我們必須清除浮動 第一種方法 在container元素後加上乙個空的div標籤，然後給設定乙個clear both的樣式 第二種方法 給container容器新增 overflow auto hidden樣式 第三張方法 ...