BFC之清除浮動篇&clear

時間 2019-11-19

標籤 bfc 清除浮動 clear 简体版

原文原文鏈接

咱們在平常代碼生活中，或多或少會利用浮動來佈局，例如導航佈局，以下圖所示：html

可是，咱們在實現的時候，常常會遇到父元素「塌陷」以及清除浮動問題。例如瀏覽器

<!DOCTYPE html> 
    <head>
        <title>Float</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <style>
            *{
                margin:0;
                padding:0;
            }
            ul {
                border:1px solid pink;
            }
            li {
                width:100px;
                height:100px;
                margin-left:10px;
                background:green;
                float:left;
                list-style-type:none;
            }
            .div1 {
                width:100px;
                height:100px;
                background:black;
            }
        </style>
    </head>
    <body>
        <ul>
            <li></li>
            <li></li>
        </ul>
        <div class="div1"></div>
    </body>
</html>

View Code

上圖中的子元素（綠色），就沒有被父元素（粉紅色的線條）包裹住，這就是塌陷問題。上圖中的黑色div本該在兩個綠色下方，但如今倒是這樣，這就是沒有清除浮動帶來的問題。ide

咦，那浮動這個東東，怎麼會如此壞的呢？！！佈局

其實，也不怪人家，原本float的設計初衷就不是用在佈局，而是文字環繞，無奈，被用在了佈局上。優化

強扭的瓜不甜嘛，不過也解渴。ui

針對它的特性對症下藥就行了，哈哈哈。spa

浮動框不屬於文檔中的普通流，當一個元素浮動以後，不會影響到塊級框的佈局而只會影響內聯框（一般是文本）的排列，文檔中的普通流就會表現得和浮動框不存在同樣，當浮動框高度超出包含框的時候，也就會出現包含框不會自動伸高來閉合浮動元素（「高度塌陷」現象）。顧名思義，就是漂浮於普通流之上，像浮雲同樣，可是隻能左右浮動。正是由於浮動的這種特性，致使本屬於普通流中的元素浮動以後，包含框內部因爲不存在其餘普通流元素了，也就表現出高度爲0（高度塌陷）。設計

好了，瞭解了它的要點，就開始對症下藥了哦，哈哈哈。3d

常規的解決方法就是利用clear來清除浮動，以及浮動帶來的塌陷問題。code

<!DOCTYPE html> 
    <head>
        <title>Float</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <style>
            *{
                margin:0;
                padding:0;
            }
            ul {
                border:1px solid pink;
            }
            li {
                width:100px;
                height:100px;
                margin-left:10px;
                background:green;
                float:left;
                list-style-type:none;
            }
            .div1 {
                width:100px;
                height:100px;
                background:black;
            }
        </style>
    </head>
    <body>
        <ul>
            <li></li>
            <li></li>
            <!--在尾部加入一個帶有clear的塊級元素-->
            <div style="clear:both;"></div>
        </ul>
        <div class="div1"></div>
    </body>
</html>

View Code

運行代碼，效果圖見下：

這樣作目的是達到了，可是它是向頁面中添加內容來達到效果的，破壞告終構以及毫無語義。

由此，咱們引入僞元素來解決這樣的問題。PS:修改的代碼中，引入了Nicolas Gallagher大師的代碼。

<!DOCTYPE html> 
    <head>
        <title>Float</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <style>
            *{
                margin:0;
                padding:0;
            }
            ul {
                border:1px solid pink;
            }
            /*用after僞元素，向ul追加一個清除浮動元素*/
            ul:after {
                content:'';
                display:table;
                clear:both;
            }
            li {
                width:100px;
                height:100px;
                margin-left:10px;
                background:green;
                float:left;
                list-style-type:none;
            }
            .div1 {
                width:100px;
                height:100px;
                background:black;
            }
        </style>
    </head>
    <body>
        <ul>
            <li></li>
            <li></li>
        </ul>
        <div class="div1"></div>
    </body>
</html>

View Code

啊哈，真是這樣的。

But，:after?!!IE六、7尼瑪又不支持它。

是哈，咱們再來想辦法看看怎麼優化優化。

因爲IE六、7有個hasLayout，這個hasLayout是麼子東西呢，當hasLayout屬性值爲false的時候，元素的尺寸和位置就由最近擁有佈局的祖先控制；當爲true時，會達到與BFC相似的效果。因此咱們能夠利用這一點解決IE六、7對:after的藐視。。

利用zoom來觸發IE六、7是一個比較通用的作法，因此咱們結合zoom和after，就獲得了一個相對靠譜的解決方案了。

代碼以下：

/*hack手段針對IE六、7*/
.fix {
    *zoom:1;
}
/*大衆瀏覽器*/
.fix:after {
    content:"";
    display:table;
    clear:both;
}

修改上面的demo代碼以下：

<!DOCTYPE html> 
    <head>
        <title>Float</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <style>
            *{
                margin:0;
                padding:0;
            }
            ul {
                border:1px solid pink;
                /*hack手段觸發IE六、7的haslayout*/
                *zoom:1;
            }
            /*用after僞元素，向ul追加一個清除浮動元素*/
            ul:after {
                content:'';
                display:table;
                clear:both;
            }
            li {
                width:100px;
                height:100px;
                margin-left:10px;
                background:green;
                float:left;
                list-style-type:none;
            }
            .div1 {
                width:100px;
                height:100px;
                background:black;
            }
        </style>
    </head>
    <body>
        <ul>
            <li></li>
            <li></li>
        </ul>
        <div class="div1"></div>
    </body>
</html>

View Code

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。