清除浮動的幾種方法以及詳解
阿新 • • 發佈:2019-01-28
1.給父元素div定義高度height
父級div手動定義height,就解決了父級div無法自動獲取到高度的問題,但是這種限制了相容性的問題,而且子元素高度必須和父元素一樣,不然會出錯。
2. 結尾處加空div標籤 clear:both
新增一個空div,利用css提高的clear:both清除浮動,讓父級div能自動獲取到高度,但是這種方法如果頁面浮動佈局多,就要增加很多空div,會使html程式碼非常複雜。建議簡單頁面使用。
3. 父級div定義 偽類:after 和 zoom
這種方法推薦使用,程式碼少,理解性強,可以寫在公共樣式中作為通用樣式。一開始我也是死記硬背的,慢慢一點點的你就理解原理了。至於:after和zoom前者是高版本瀏覽器相容,後者是針對於低版本瀏覽器(主要針對IE7及以下)。
4. overflow:hidden
使用overflow:hidden時,瀏覽器會自動檢查浮動區域的高度
,不能和position配合使用,因為超出的尺寸的會被隱藏。
這是本人總結的幾種清除浮動的方法,也有參考過別人。希望對大家有所幫助