【CSS】清除浮動的五種方式

清除浮動是一件功德無量的事情23333 這裏記錄一下清除浮動的多種方式

 

*首先要明確的是，爲何要清除浮動？

A 影響其餘元素定位

父盒子高度爲0，子盒子所有浮動、定位，子盒子不會撐開父盒子，下面的元素會到子盒子的下面

 

B 背景圖片或顏色不能正常顯示

因爲浮動產生，若是對父級設置了CSS背景顏色或CSS背景圖片，而父級不能被撐開，因此致使CSS背景不能顯示。

 

C margin padding設置受到影響

因爲浮動致使父子盒子之間設置的padding margin不能正常表達，特別是上下的padding margin。

 

 

1  給父級盒子定義高度

原理：父級div手動定義高度，就決絕了父盒子沒法自動獲取到高度的問題，簡單有效代碼少

缺點：只適合高度固定的佈局。

 

2   結尾處加上空div標籤 clear:both

原理：在浮動元素的後面加上空div元素，利用css提供的clear:both清除浮動，讓父盒子自動獲取高度。

缺點：若是頁面浮動較多，就要寫n個空標籤，會擾亂代碼。

 

3  **最佳拍檔** 使用僞類 父盒子:after 和 zoom

 1         .clearFlo:after{
 2             content: '';
 3             height: 0;
 4             display: block;
 5             visibility: hidden;
 6             line-height: 0;
 7             clear: both;
 8         }
 9 
10         .clearFlo{
11             zoom: 1;
12         }

 

原理：IE8+支持，:after原理和方法2有點相似，zoom是IE專有屬性，能夠解決6/7浮動問題，因此這是一個比較好的解決辦法，推薦使用公共雷鳴，以減小css代碼

 

4 父盒子定義overflow:hidden

缺點：超出盒子部分會被隱藏，不推薦使用。

 

5 雙僞元素法

        .clearfix:before, .clearfix:after{
            content: ' ';
            display: table;
        }

        .clearfix:after{
            clear: both;
        }
        .clearfix{
            zoom: 1;
        }

 

原理：經過:after僞類在浮動元素後面加上display:table的不可見內容塊，並給它設置clear:both來清除浮動。

 

總結：

第一種方法：簡單，容易掌握，但只適合高度固定的佈局，不推薦使用能夠了解。

第二種方法：簡單，瀏覽器支持好，但若是頁面浮動佈局多，就要增長不少空div，讓人感受很麻煩，不推薦使用，能夠了解。

第三種方法：瀏覽器支持好,建議使用。

第五種方法：瀏覽器支持好,建議使用。