CSS的清除浮動的方法

2021-09-27 11:18:11 字數 605 閱讀 7107

為什麼要清除浮動?——主要是浮動會導致父元素高度塌陷

了解了緣由 下面就是清除浮動的常用方法

1.父元素加:overflow:hidden

————缺點:超出無法隱藏

2.父元素加:width(高度)

————缺點:高度無法自適應

3.父元素加:display:inline block

————缺點:所有inline block的缺點

4.在浮動的元素後面加乙個空div:

————缺點:結構冗餘

5.父元素加定位

————缺點:脫離文件流

6.父元素加浮動

下面是萬能清除法

.cl:after

.cl

="box cl"

>

浮動1<

/div>

浮動2<

/div>

<

/div>

CSS清除浮動的方法

給元素設定了float屬性後脫離了文件流,不佔據位置,所以其父級無法將其包裹,需要清除浮動。段 box item style class box class item div div 效果 方法一 給父級設定高度 段 box 問題解決 缺點 擴充套件性不好,沒有解決根本問題 方法二 給父級加上flo...

css 清除浮動的方法

不新增清除浮動的時候 這裡我沒有給最外層的div.outer 設定高度,但是我們知道如果它裡面的元素不浮動的話,那麼這個外層的高是會自動被撐開的。但是當內層元素浮動後,就出現了一下影響 1 背景不能顯示 2 邊框不能撐開 3 margin 設定值不能正確顯示 清除浮動方法1 新增新的元素,給他的cs...

css清除浮動的方法

1.額外標籤法 在浮動元素末尾新增乙個空標籤 必須是塊級元素 如 div style clear both 不推薦,新增無意義的標籤,礙事 2.父級新增overflow方法 overflow hidden auto scroll 優點 簡單 缺點 內容增多時容易造成不會自動換行導致內容被隱藏,無法顯...