BFC之寬度自適應佈局篇

時間 2019-11-18

標籤 bfc 寬度自適應佈局欄目 CSS 简体版

原文原文鏈接

說到自適應佈局，咱們曾在「拋磚引玉之寬度自適應佈局」一文中學習過。當時的核心思想主要是利用float+margin的形式。利用塊狀元素的流體特性，而後計算出float元素的寬度，並賦予到塊狀元素的相應margin中。可是這麼作是有個缺點的，就是咱們每次都得知道float元素的寬度，而後賦予到塊狀元素的margin。html

然而，咱們在」BFC之淺析篇」中學習到BFC有一特性：BFC的區域不會與外部浮動元素重疊。而且利用了這一特性，實現了兩欄自適應佈局。咱們再來回顧下。瀏覽器

<!DOCTYPE html> 
    <head>
        <title>BFC</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <style>
             .leftDiv {
                 width:100px;
                 height:100px;
                 background:green;
                 float:left;
             }
             .normalDiv {
                 height:100px;
                 background:pink;
                 /*添加overflow:hidden，觸發元素BFC*/
                 overflow:hidden;
             }
        </style>
    </head>
    <body>
        <div class="leftDiv"></div>   
        <div class="normalDiv">

        </div>
    </body>
</html>

運行代碼，截圖爲下ide

能夠看見浮動元素（綠色方塊）與div.noramDiv元素的確木有發生重疊，並且我也沒有加margin哦。佈局

你也能夠本身運行下上述代碼，伸縮頁面寬度，能夠發現也的確是自適應滴。學習

（PS：上面所示的BFC實現兩欄自適應的例子，能夠和「float實例講解」對比學習下，效果會更加哦。）ui

咱們上面是利用的overflow:hidden;來觸發div.normalDiv的BFC。在「BFC之淺析篇」中，咱們學習到要觸發元素成爲BFC，有以下幾種方法：spa

一、 float屬性不爲nonecode

二、 position爲absolute或fixedorm

三、 overflow的值不爲visiblehtm

四、 display的值爲table-cell，table-caption，inline-block中的任何一個。

拋開第三點，overflow的值不爲visible，其餘幾種也適合實現BFC自適應佈局？

固然不是咯。

首先，針對第一點float，因爲float觸發元素BFC後，自身float又帶有特性，如將元素包裹化了，破壞了塊級元素的流體性，因此不能用來自適應佈局。

針對第二點position，又因爲position將元素脫離文檔流比較嚴重，所以，更加不能用來自適應佈局。

針對，第四點中 display:table-cell，當你設置一個比寬度無線大時，它也不會超過它容器的寬度。

嘖嘖嘖！這不就完美了麼。那麼咱們設置它的寬度爲很大很大時，也就能夠用來自適應佈局了嘛。

看看以下代碼

<!DOCTYPE html> 
    <head>
        <title>BFC</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <style>
             .leftDiv {
                 width:100px;
                 height:100px;
                 background:green;
                 float:left;
             }
             .normalDiv {
                 height:100px;
                 background:pink;
                 /*添加display:table-cell，且將寬度設置爲很大，如9000px*/
                 display:table-cell;
                 width:9000px;
             }
        </style>
    </head>
    <body>
        <div class="leftDiv"></div>   
        <div class="normalDiv"></div>
    </body>
</html>

View Code

運行代碼後，效果圖見上。

ps:本身運行後的體會更深哦，而後伸縮瀏覽器，哈哈哈，試了就知道，是能夠的哦。

針對第四點中的display:table-caption，直接濾過！

針對第四點鐘的display:inline-block，因爲和float同樣具備包裹性，因此濾過。可是，咱們曾在"BFC之清除浮動篇&clear"中提到過IE六、7有個hasLayout嘛，在IE六、7中它但是具備流體特性的哦。因此能夠解決IE六、7的自適應佈局。代碼以下

.floatElm {
    float: left;
}
.bftContent {
    display: inline-block;
}

so，對觸發BFC的方法，能用在自適應佈局中的方法以下

overflow（hidden/auto）

缺點：

一、 overflow:hidden當內容過多時，帶有剪裁功能

二、 overflow:auto當內容過多時，會出現滾動條

display:inline-block

缺點：

只適用於IE六、7

display:table-cell

缺點：

只適用於IE8+和其餘瀏覽器

終上所述，咱們能夠獲得利用BFC實現自適應佈局的通用方法以下：

.floatElm {
    float:left;
}
.bfcContent {
    display:table-cell;
    width:9000px;/*寬度大到屏幕寬度便可*/
    /*hack手段，針對IE六、7*/
    *display:inline-block;
    *width:auto;
}

好了，咱們利用這個方法來實現實現三欄佈局玩玩。代碼以下：

<!--
    左右寬度爲100px，中間自適應
-->
<!DOCTYPE html> 
    <head>
        <title>BFC</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <style>
            .floatLeft,.floatRight {
                width:100px;
                height:100px;
            }
            .floatLeft {
                /*左浮動觸發BFC*/
                float:left;
                background:green;
            }
            .floatRight {
                /*右浮動觸發BFC*/
                float:right;
                background:yellow;
            }
            .bfcContent {
                /*table-cell觸發BFC*/
                display:table-cell;
                width:9000px;/*寬度大到屏幕寬度便可*/
                /*hack手段，針對IE六、7*/
                *display:inline-block;
                *width:auto;
                height:100px;
                background:pink;
            } 
        </style>
    </head>
    <body>
        <div class="floatLeft"></div>
        <div class="floatRight"></div>
        <div class="bfcContent bfcContentStl"></div>
    </body>
</html>