css 之 BFC

　　　　

1，定義

　　BFC爲塊級格式化上下文，也就是一塊區域內的封閉空間，裏面元素不管怎麼樣，都不會影響外部元素。

2，觸發條件

• html 根元素
• display的值爲 inline-block、table-cell和table-caption中的任何一個
• position的值不爲relative和static
• overflow的值爲auto、scroll或者hidden
• float的值不爲none

3，基本用途

　　1，去除margin重疊

　　　　BFC不會影響外面的元素，因此BFC元素確定不會發生margin重疊，由於margin重疊會影響外面的元素的。

　　2，清除浮動的影響

　　　　若是沒有清除浮動帶來的父元素高度坍塌的話，那麼勢必會影響後面元素的佈局，因此BFC會清除浮動帶來的影響。

　　　　因此只要元素符合BFC的觸發條件，就不用再加其餘多餘的clearfix去清除浮動的影響了

4，進階技巧

　　BFC與流體佈局

　　　　BFC的特性帶來的用法最重要的其實不是去margin重疊或者清除浮動，而是實現更好的自適應佈局。舉例說明：

                                                                      

 

　　　　通常狀況下  這種左邊圖像，右邊是介紹文字的佈局很常見。

<style>
        img{width:50px;height:50px;float:left;}
</style>

<div class="box">
        <img src="images/e.png" alt="">
        <p>婚姻如一所房子，是讓它住滿陽光，裝滿溫暖，仍是讓它空空如也，淒涼寒冷，要看你往裏面放的是愛心仍是冷漠。
　　　　　　　若是兩人都努力愛對方，給對方愛的包容呵護，給對方愛的理解，這房子裏就會長出愛的種子，房子裏的每一個物件、每一個角落都會充滿愛的樣子。
           若是你往裏面放的是惡言穢語、蠻橫暴力，房間就會陰冷，如寒冬徹骨。因此想看的婚姻甜蜜的樣子，就多注入愛的蜜汁，讓房間裏的人和物都活出愛的味道。
        </p>
</div>

 

　　　　由於img是浮動的元素，因此p裏面的文字會被影響而環繞着圖片。

　　　　若是咱們不想文字環繞圖片，只想文字和圖片分兩欄顯示，這時候就能夠用到BFC的特性了。

　　　　

　p{overflow: hidden;}

　　　　由於BFC的特性，BFC元素不會受外部元素的影響，不會影響外部元素，因此這裏的p元素文字不會和img產生任何交集。 效果以下：

　　　　　　　　　　　　　　　　　　　

　　　　實際項目中，文字和圖片之間確定要加一些距離，這個也很簡單，給浮動的元素加margin-right或者padding-right就能夠實現。

　　　　這裏假如img和文字之間的間隔爲10px ，就能夠這樣來處理：

        img{width:50px;height:50px;float:left;margin-right:10px;}
        p{overflow: hidden;}

　　　　效果以下：

　　　　　　　　

　　　　

 

　　那麼這種佈局有什麼優勢呢？

　　　　　　1，基於BFC的這種自適應佈局，由於他是出於BFC所在的封閉環境，因此更加健壯，容錯性更強。

　　　　　　2，右邊的文字會自動填滿除浮動圖片以外的全部區域，能夠不用關心浮動元素的寬度。因此說是能夠通用的。

　　　　　　　　能夠抽象幾個class名稱

　　　　　　　　

.fl{float:left;}
.fr{float:right;}
.bfcHidden{overflow:hidden;}

　　　　　　　項目中遇到這種需求的時候，直接使用上面的類名就能夠完成基本的佈局。

 

　　這種佈局的缺點

　　　　咱們能夠看到上面寫的觸發BFC的幾個條件，好比float，position，overflow等等，這些屬性自身都有一些古怪的特性，這裏拿出幾個有表明的說明一下。

　　　　　   1，float：left

　　　　　　　　float元素有破壞性和包裹性，失去了元素的自適應性，因此沒法來實現自動填滿的自適應佈局。

　　　　　　2，position：absolute

　　　　　　　　absolute脫離文檔了，和非定位元素無法一塊兒。

　　　　　　3，overflow：hidden

　　　　　　　　這個仍是很好的，基本沒有什麼太大的問題。 惟一的問題是超出容器的會被隱藏掉。

　　　　　　4，display：inline-block

　　　　　　　　會讓元素有包裹性。

　　　　　　5，display：table-cell

　　　　　　　　讓元素表現像單元格同樣。 它有一個神奇的特性，就是寬度設置的再大，也不會超過表格容器的寬度。因此在這裏咱們能夠把設置了table-cell的這個元素寬度設置大一些，好比9999px，這樣的話就很好了，比overflow：hidden的使用更爲普遍。

　　　　　　

　　最後： 

　　　　關於display：table-cell 的連續英文字符沒法換行的問題，能夠用以下css解決：

　　　　

.tableCell-break{
   display:table;
   width:100%;
   table-layout: fixed;
   word-break: break-all;
}