說到自適應布局,我們曾在“拋磚引玉之寬度自適應布局”一文中學習過。當時的核心思想主要是利用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
不信,自己運行代碼,拉動浏覽器看看啦。