前端開發CSS怎么清除浮動
更新時間:2023-03-03
常用的CSS清除浮動的方法為使用clear屬性清除浮動:使用空標記清除浮動、使用overflow屬性清除浮動、使用after偽元素清除浮動。如果想具體了解前端開發CSS清除浮動的方法,那不妨接著往下看吧!
前端開發CSS清除浮動的方法
在前端開發過程中,非IE瀏覽器下,當容器的高度自動,并且容器內容中有浮動元素(float為left或right),此時如果容器的高度不能自適應內容的高度,從而使得內容溢出破壞整體布局,這種現象叫做浮動溢出。
為了方式這個現象的發生,就需要對CSS樣式進行處理,而這個過程就叫做CSS清除浮動。
一般使用clear屬性清除浮動。但是要注意的是clear屬性只能清除標記左右兩側浮動的影響,然而在網頁開發時,經常會受到一些特殊的浮動影響,例如,對子標記設置浮動時,如果不對其父標記定義高度,則子標記的浮動會對父標記產生影響。使用clear屬性并不能消除子標記浮動對父標記的影響。
1)使用空標記清除浮動
在浮動標記之后添加空標記,并對該標記應用“clear:both”樣式,可清除標記浮動所產生的影響,這個空標記可以是“div”。
2)使用overflow屬性清除浮動
對標記應用overflow:hidden”樣式,也可以清除浮動對該標記的影響。這種方式彌補了空標記清除浮動的不足。
需要注意的是,在使用“overflow:hidden”樣式清除浮動時,一定要將該樣式寫在被影響的標記中。
3)使用after偽元素清除浮動
使用after偽元素也可以清除浮動,但是該方法只適用于IE8及以上版本瀏覽器和其他非IE瀏覽器。使用after偽元素清除浮動時需要注意以下兩點:
①必須為需要清除浮動的標記偽元素設置“height:0;”樣式,否則該標記會比其實際高度高出若干像素。
②必須在偽元素中設置content屬性,屬性值可以為空,如“content:””;”。
前端技術相對后臺編程更容易入門,而前端開發工程師職業發展以及就業薪資非常穩定。如果想要系統學習Web前端開發技能??梢灾苯油ㄟ^碼上未來官網了解在線學習前端+移動開發的課程。
推薦課程
-
唐山現代多元Design全能班
346人 報名小編
-
唐山現代多元Design精英班
393人 報名小編
-
唐山現代藝術設計全能班
373人 報名小編
-
唐山電商課程培訓班
331人 報名小編
-
唐山專業盲打指法訓練
251人 報名小編