DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS特效代碼 >> BFC之寬度自適應布局篇
BFC之寬度自適應布局篇
編輯:CSS特效代碼     

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

然而,我們在”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>

 運行代碼,截圖為下

可以看見浮動元素(綠色方塊)與div.noramDiv元素的確木有發生重疊,而且我也沒有加margin哦。

你也可以自己運行下上述代碼,伸縮頁面寬度,可以發現也的確是自適應滴。

(PS:上面所示的BFC實現兩欄自適應的例子,可以和“float實例講解”對比學習下,效果會更加哦。)

我們上面是利用的overflow:hidden;來觸發div.normalDiv的BFC。在“BFC之淺析篇”中,我們學習到要觸發元素成為BFC,有如下幾種方法:

1、  float屬性不為none

2、  position為absolute或fixed

3、  overflow的值不為visible

4、  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"中提到過IE6、7有個hasLayout嘛,在IE6、7中它可是具有流體特性的哦。所以可以解決IE6、7的自適應布局。代碼如下

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

so, 對觸發BFC的方法,能用在自適應布局中的方法如下

overflow(hidden/auto)

缺點:

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

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

display:inline-block

缺點:

只適用於IE6、7

display:table-cell

缺點:

只適用於IE8+和其他浏覽器

終上所述,我們可以得到利用BFC實現自適應布局的通用方法如下:

.floatElm {
    float:left;
}
.bfcContent {
    display:table-cell;
    width:9000px;/*寬度大到屏幕寬度即可*/
    /*hack手段,針對IE6、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手段,針對IE6、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>
View Code

 

不信,自己運行代碼,拉動浏覽器看看啦。 

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved