佈局和BFC

塊級格式化上下文 BFC

是W3C CSS2.1規範中的一個概念，決定了元素如何對其內容進行定位，以及與其餘元素的關係和相互做用。目前除了IE6-7外其餘瀏覽器均支持BFC。在CSS3中BFC叫作Flow Root。 與普通容器相比，BFC元素能夠看做是隔離了的獨立容器，內部的元素不會在佈局上影響外面元素。

如何造成BFC

知足任意下面條件的元素可造成BFC： 1. 浮動元素，float除了none外的值 2. 絕對定位元素，position:absolute/fixed 3. display爲 inline-block , table-cells , table-captions之一 4. overflow爲visiable以外的值（hidden,auto,scroll） display:table自己不產生BFC，而是由它產生匿名框，包含display:table-cell的框產生BFC。 注意：BFC並非元素，而是元素帶有的一些屬性，所以上面元素是產生了BFC，而他們自己並非BFC。

BFC的做用

總體上看，BFC的做用是隔離了容器，具體有三個表現： 總體上看，BFC的做用是隔離了容器，具體有三個表現： 這是使用overflow:hidden方法閉合浮動的原理，W3C原文："‘Auto‘ heights for block formatting context roots"，就是BFC會根據子元素狀況自動適應高度，使子元素包含浮動 注意：IE6-7不支持BFC，須要出發hasLayout閉合浮動

<div style="border:1px solid #00F;overflow:hidden;width:300px;"> <div style="float:left;background:#939;">個人父元素是 BFC</div> </div> <div style="line-height:3em;"> ----------我是華麗分割線----------- </div> <div style="border:1px solid gray;width:300px;"> <div style="float:left;background:#3C6;">個人父元素不是 BFC</div> </div>

2.

BFC能夠組織元素被浮動元素覆蓋 浮動元素的塊級兄弟元素會無視浮動元素的位置，儘可能佔滿一行，這樣會被浮動元素覆蓋，爲該兄弟元素造成BFC能夠組織被覆蓋。

<div style="float:left;width:150px;height:50px;background:#FF0;"> 我是浮動元素 </div> <div style="width:200px;height:80px;background:#30F;color:#fff;"> 我是非浮動元素，而且沒有建立 BFC </div> <div style="line-height:3em;"> ----------我是華麗分割線----------- </div> <div style="float:left;width:150px;height:50px;background:#FF0;"> 我是浮動元素 </div> <div style="width:200px;height:80px;background:#30F;color:#fff;display:inl ine-block;"> 我是非浮動元素，建立了 BFC </div>

 

3.

BFC能夠阻止父子元素的margin摺疊 當且僅當兩個塊級元素毗鄰而且在同一塊級格式化上下文時，他們垂直方向之間的外邊距纔會摺疊。也就是說，及時兩個塊級元素毗鄰，當不在同一個BFC時，它們的邊距不會摺疊。

<div style="margin-top:20px;background:yellow;width:300px;"> <div style="margin-top:20px;"> 個人上外邊距是 20px，父級元素不是 BFC </div> </div> <div style="line-height:3em;"> ----------我是華麗分割線-----------</div> <div style="margin-top:20px;background:yellow;overflow:auto;width:300px;"> <div style="margin-top:20px;"> 個人上外邊距是 20px，父級元素是 BFC </div> </div>

4.頁面佈局

 

靜態佈局（Static Layout） 即傳統Web設計，對於PC設計一個Layout，在屏幕寬高有調整時，使用橫向和豎向的滾動條來查閱被遮掩部分；

對於移動設備，單獨設計一個佈局，使用不一樣的域名如wap.或m.。 自適應佈局（Adaptive Layout） 是分別爲不一樣的屏幕分辨率定義佈局。佈局切換時頁面元素髮生改變，但在每一個佈局中，頁面元素不隨窗口大小的調整發生變化。 你能夠把自適應佈局看做是靜態佈局的一個系列。

流式佈局（Liquid Layout） （也叫"Fluid") 是頁面元素的寬度按照屏幕進行適配調整，主要的問題是若是屏幕尺度跨度太大，那麼在相對其原始設計而言太小或過大的屏幕上不能正常顯示。

響應式佈局（Responsive Layout） 分別爲不一樣的屏幕分辨率定義佈局，同時，在每一個佈局中，應用流式佈局的理念，即頁面元素寬度隨着窗口調整而自動適配。 能夠把響應式佈局看做是流式佈局和自適應佈局設計理念的融合。