css利用clearfix方法清除浮動詳解

最後更新：2017-01-13 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

一，什麼是.clearfix

你只要到Google或者Baidu隨便一搜"css清除浮動"，就會發現很多網站都講到"盒子清除內部浮動時可以用到.clearfix"。

代碼如下	複製代碼
.clearfix:after { content: " "; display: block; clear: both; height: 0; } .clearfix { zoom: 1; } <div class="clearfix"> <div class="floated"></div> </div>

上面的代碼就是.clearfix的定義和應用，簡單的說下.clearfix的原理：

1、在IE6, 7下zoom: 1會觸發hasLayout，從而使元素閉合內部的浮動。

2、在標準瀏覽器下，.clearfix:after這個偽類會在應用到.clearfix的元素後面插入一個clear: both的區塊層級元素，從而達到清除浮動的作用。

代碼如下	複製代碼
<div> <div class="floated"></div> </div> <div style="clear: both"></div>

二，.clearfix的弊端

在上面的代碼中可以看到，拋開IE6, 7不談，.clearfix在標準瀏覽器下插入了一個clear: both的元素，這樣很可能清除掉不必要的浮動。舉例來說明：

代碼如下

複製代碼

<!DOCTYPE html>
<html>
<head>
    <title>Demo</title>
    <style type="text/css">
        html, body { padding: 0; margin: 0; }
        ul { margin: 0; padding: 0; }
        .clearfix:after {
            content: " ";
            display: block;
            clear: both;
            height: 0;
        }
        .clearfix {
            zoom: 1;
        }
        .left-col {
            background: red;
            float: left;
            width: 100px;
            height: 300px;
        }
        .right-col {
            margin-left: 100px;
        }
        .menu {
            border: 1px solid #000;
        }
        .menu li {
            float: left;
            display: block;
            padding: 0 1em;
            margin: 0 1em 0 0;
            background: #ccc;
        }
        .placeholder {
            background: yellow;
            height: 400px;
        }
    </style>
</head>
<body>
    <div class="left-col">
    </div>
    <div class="right-col">
        <ul class="menu">
            <li>Menu Item</li>
            <li>Menu Item</li>
            <li>Menu Item</li>
            <li>Menu Item</li>
            <li>Menu Item</li>
            <li>Menu Item</li>
        </ul>
        <div class="placeholder"></div>
    </div>
</body>
</html>

上面的代碼構成一個兩列布局的頁面。注意.menu這個菜單設定了邊框，但是由於.menu的li元素是左浮動的，導致.menu沒有高度，於是可以用.clearfix來清除.menu內部的浮動。代碼如下：

代碼如下	複製代碼
<ul class="menu clearfix"> <li>Menu Item</li> <li>Menu Item</li> <li>Menu Item</li> <li>Menu Item</li> <li>Menu Item</li> <li>Menu Item</li> </ul>

但是應用完.clearfix後，在標準瀏覽器下頁面變得很亂，這是因為.clearfix:after把.left-col的浮動也給清除掉了。

三，重構.clearfix

在遭遇到上面的錯誤之後，分析一下除了.clearfix:after這種方式之外還有沒有別的方法清除元素內部的浮動。答案是有的，在白話Block Formatting Contexts這篇文章中提到過構成Block Formatting Context的元素可以清除內部元素的浮動。那麼只要使.clearfix形成Block Formatting Context就好了。構成Block Formatting Context的方法有下面幾種：

float的值不為none。
overflow的值不為visible。
display的值為table-cell, table-caption, inline-block中的任何一個。
position的值不為relative和static。
很明顯，float和position不合適我們的需求。那隻能從overflow或者display中選取一個。因為是應用了.clearfix和.menu的菜單極有可能是多級的，所以overflow: hidden或overflow: auto也不滿足需求（會把下拉的菜單隱藏掉或者出捲軸），那麼只能從display下手。

我們可以將.clearfix的display值設為table-cell, table-caption, inline-block中的任何一個，但是display: inline-block會產生多餘空白，所以也排除掉。剩下的只有table-cell, table-caption，為了保證相容可以用display: table來使.clearfix形成一個Block Formatting Context，因為display: table會產生一些匿名盒子，這些匿名盒子的其中一個（display值為table-cell）會形成Block Formatting Context。這樣我們新的.clearfix就會閉合內部元素的浮動。下面是重構之後的.clearfix。

代碼如下	複製代碼
.clearfix { zoom: 1; display: table; }

四，總結

在IE6, 7下面只要是觸發了hasLayout的元素就可以清除內部浮動了。而在標準瀏覽器下面清除元素內部浮動的方法有很多，除了.clearfix:after這種方式，其餘的方法無非就是產生新的Block Formatting Context以達到目的。如果可以做到在什麼條件下用哪種方法，我認為這樣就足夠了......

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More