清除浮動float那點事兒

2021-09-27 03:57:23 字數 572 閱讀 1493

拋棄那些沒用的方法,只記住最實用的一種方法即可!

給要清除浮動的父元素多加乙個class屬性:clearfix!!!

樣式如下:

.clearfix:after{

content:".";        

display:block;        

height:0;        

clear:both;        

visibility:hidden;        

為了相容ie6,ie7(現在的專案幾乎已經完全不考慮)

.clearfix{

zoom:1

清除浮動就是這麼簡單,可以作為公共樣式common.css,每個頁面都可以直接呼叫!

簡單的例項應用:

//sth

//sth

為什麼要清除浮動:

1.之前寫的時候都會發現頁面寫著寫著就發生錯亂,而且還有重疊?就是浮動惹的禍!

2.父級元素下面的子元素float時,可能會導致父級height值為0;故在使用了float之後,立即在父級上面加上clearfix,徹底消除float帶來的各種怪異問題!

清除浮動float那點事兒

拋棄那些沒用的方法,只記住最實用的一種方法即可!給要清除浮動的父元素多加乙個class屬性 clearfix!樣式如下 clearfix after content display block height 0 clear both visibility hidden 為了相容ie6,ie7 現在的...

float清除浮動

影響 浮動會使元素具有塊級元素和行內元素的特點 即內聯塊的特點 讓塊元素在同一行顯示。內聯塊 inline block 和浮動 float left right none 元素脫離文件流,按照浮動方向移動,遇到父級邊界或者相鄰浮動元素停住 但是無論哪種方式都需要做一些處理 去除inline bloc...

float清除浮動

在非ie瀏覽器下,當容器的高度為auto,且容器的內容中有浮動 float為left或right 的元素,在這種情況下,容器的高度不能自動伸長以適應內容的高度,使得內容溢位到容器外面而影響 甚至破壞 布局的現象。即父級物件盒子無法被撐開,這個現象叫浮動溢位,為了防止這個現象的出現而進行的css處理,...