CSS清除浮動4種方法

2021-09-25 17:32:22 字數 966 閱讀 9458

是為了解決 父元素因為子元素浮動而引起的內部高度為0的問題。

布局：

盒子1


盒子2 大盒子
樣式：

盒子1和2都設定浮動後

.big, .small
1.額外標籤法在最後乙個浮動標籤後，新加乙個標籤，給其設定clear：both；

big


small


額外標籤法


// css：


.clear
優點：通俗易懂，方便

2.父元素新增overflow屬性

通過觸發bfc方式，實現清除浮動。

.father
優點：**簡潔

3.使用after偽元素清除浮動（推薦使用）

// 先給父元素增加乙個類名 clearfix ，然後在樣式中新增如下內容


.clearfix:after


.clearfix
優點：符合閉合浮動思想，結構語義化正確

缺點：ie6-7不支援偽元素 :after，使用zoom:1觸發haslayout。

4.使用before和after雙偽元素清除浮動

.clearfix:after, .clearfix:before


.clearfix:after


.clearfix
優點：**更簡潔

缺點：用zoom:1觸發haslayout。

css清除浮動4種方法

因為浮動會使當前標籤產生向上浮的效果，同時會影響到前後標籤 父級標籤的位置及 width height 屬性。而且同樣的 在各種瀏覽器中顯示效果也有可能不相同，這樣讓清除浮動更難了。解決浮動引起的問題有多種方法，但有些方法在瀏覽器相容性方面還有問題。left right div2 原理 父級div手...

CSS清除浮動的4種方法

1.這個就是給父元素也設定浮動元素。讓父元素也浮動起來 優點 沒有多餘的空標籤 缺點 缺點就是浮動太多了。估計應該我以後不會怎麼使用 2.增加空標籤 在浮動元素後面新增乙個空標籤，清除浮動 優點 好處就是簡單直接,非常明白。缺點 如果以後要修改的話,可能空標籤不知道是什麼意思。3.overflow ...

CSS清除浮動的4種方法總結

通過在浮動元素末尾 同級 新增乙個空的標籤，例如 或則其他標籤br等。class clear div clear style 可以給父級新增 overflow hidden auto scroll都可以實現。css初始檔案可以加上 clearfix after clearfix ie6 7 專有 然...