清除float浮動造成影響的幾種解決方案

2022-01-16 09:51:39 字數 1500 閱讀 9024

1.「清除浮動」 ??

準確的描述應該是「清除浮動造成的影響」

《css深入理解之float浮動》

2.如何清除浮動造成的影響???

栗子 塊級div元素包含乙個內聯img元素,此時div的高應該是img撐開的高度,當設定了img元素設定浮動後,div高度就會坍塌

浮動的破壞性 浮動導致高度坍陷**

3.包裹性/float浮動/position:absolute定位

a.首先的說明包裹性,因為具有包裹性的元素都可以清除浮動造成的影響

b.對於float浮動 包裹性對於乙個塊級block元素,div預設寬度100%,設定float:left/right後,其寬度表現為內容的寬度

c.對於absolute絕對定位 包裹性對於乙個塊級block元素,div預設寬度100%,設定position:absolute後,其寬度表現為內容的寬度

綜合上述說明 無論是float浮動或是absolute絕對定位最終都向display:inline-block靠攏

4.幾種「清除浮動造成的影響」解決方案

方案一.利用display:inline-block清除浮動

(說明 對於display:inline-block(塊級內聯元素,可以想象成冰水混合物)

而言,無論 

是塊級block元素還是inline元素,使用了該屬性後,block元素體現為內容的寬度,自左向右排列,

inline元素體現為可以像塊級元素那樣設定寬高 )

方案二.對於overflow:hidden的包裹性(或可靠的迫使父元素包含浮動的子元素),設定了overflow:hidden屬性使得坍陷div有了高度

overflow:hidden另乙個作用是超大的子內容會被容器剪下掉

方案三.對於zoom的包裹性,比例縮放,跟css3中transform:scale類似; 已經不能清除浮動

方案四.使用偽類:after + zoom方法,清除浮動《推薦方法》

.clearfix

.clearfix:after

【資料參考 】

對overflow與zoom清除浮動的一些認識/

清除浮動 float 的影響介紹

浮動會導致父元素塌陷如圖 解決辦法 父元素owww.cppcns.com如圖 末尾插入子元素clear,如圖 為甚麼,父元素overflow hidden會解決塌陷問題?來自知乎貘吃饃香的回答 overflow hidden 的意思是超出的部分要裁切隱藏掉 那麼如果 float 的元素不佔普通流位置...

float清除浮動

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

float清除浮動

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