清除浮動的幾種方法

2021-10-05 15:14:59 字數 1779 閱讀 3286

由於父級盒子很多情況下,不方便給高度,但是子盒子浮動又不占有位置,最後父級盒子高度為 0 時,就會影響下面的標準流盒子

子盒子浮動

子盒子浮動

我是後面的元素

想要的效果 

實際情況是

由於浮動元素不再占用原文件流的位置,所以它會對後面的元素排版產生影響

//語法:

選擇器

屬性值

描述left

不允許左側有浮動元素 (清除左側浮動的影響)

right

不允許右側有浮動元素 (清除右側浮動的影響)

both

同時清除左右兩側浮動的影響

額外標籤法也稱為隔牆法,是 w3c 推薦的做法;額外標籤法會在浮動元素末尾新增乙個空的標籤,例如

,或者其他標籤(如

等) 注意:要求這個新的空標籤必須是塊級元素

float

float

可以給父級新增 overflow 屬性,將其屬性值設定為 hidden、 auto 或 scroll ;子不教,父之過,注意是給父元素新增**

float

float

:after方式其實是額外標籤法的公升級版(還是加一堵牆),也是給父元素新增

為什麼需要清除浮動?

父級沒高度

子盒子浮動了

影響下面布局了,我們就應該清除浮動了

清除浮動的方式

優點缺點

額外標籤法 (隔牆法)

通俗易懂,書寫方便

新增許多無意義的標籤,結構化較差

父級 overflow: hidden;

書寫簡單

溢位隱藏

父級 after 偽元素

結構語義化正確

由於ie6-7不支援 :after,相容性問題

父級雙偽元素

結構語義化正確

由於ie6-7不支援 :after,相容性問題

清除浮動的幾種方法

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樣式 第三張方法 ...