CSS中關於觸發BFC

一、BFC 定義

　　BFC(Block formatting context)直譯為"塊級格式化上下文"。它是一個獨立的渲染地區，只有Block-level box參與， 它規定了內部的Block-level Box如何布局，並且與這個地區外部毫不相干。

二、BFC布局規則：
1、BFC布局規則：
（1） 內部的Box會在垂直方向，一個接一個地放置。
（2） Box垂直方向的距離由margin決定。屬於同一個BFC的兩個相鄰Box的margin會發生重疊
（3） 每個元素的margin box的左邊， 與包含塊border box的左邊相接觸(對於從左往右的格式化，否則相反)。即使存在浮動也是如此。
（4） BFC的地區不會與float box重疊。
（5） BFC就是頁面上的一個隔離的獨立容器，容器裡面的子項目不會影響到外面的元素。反之也如此。
（6） 計算BFC的高度時，浮動元素也參與計算


三、哪些元素會產生BFC?
根項目
float屬性不為none
position為absolute或fixed
display為inline-block, table-cell, table-caption, flex, inline-flex
overflow不為visible


--------------------------------------------------------------------------------------------------------------
做一個側邊欄目但是被包含了

<span style="font-size:18px;"><div class="aside"></div><div class="main"></div>.aside {            width: 100px;            height: 150px;            float: left;            background: #f66;        }        .main {            height: 200px;            background: #fcc;        }</span>

---------------------------------------------------------------------------------------------------------------
是不是出問題了呢。
--出發BFC

 .main {            height: 200px;            background: #fcc;            overflow: hidden;        }

--------------------------------------------------------------------------------------------------------------
經典的上邊距重疊問題
實驗2:

.main{            background-color: darkgrey;            width: 700px;        }.first{            margin-top: 100px;            width: 50px;            height: 50px;            background-color: #000000;        }        .second{            width: 50px;            height: 50px;            background-color: blue;        }<div class="main">    <div class="first"></div>    <div class="second"></div></div>

margin-top: 100px;---這句話如果加上和沒加有什麼區別呢  ------------BFC的地區不會與float box重疊 用main觸發BFC


實驗3:影響別的元素

 .main{            background-color: darkgrey;            width: 700px;        }        .first{            width: 50px;            height: 50px;            background-color: #000000;        }        .second{            width: 50px;            height: 50px;            background-color: blue;            margin-left: 800px;        }

當我們給main裡邊的元素設定了過多的值800px的時候,勢必會印象外邊的東西
當我們設定了BFC的時候，就不會發生這種情況-------------------BFC就是頁面上的一個隔離的獨立容器，容器裡面的子項目不會影響到外面的元素


實驗:

.box {width:210px;border: 1px solid #000;float: left;}        .img {width: 100px;height: 100px;background: #696;float: left;}        .info {background: #ccc;color: #fff;}<div class="box">    <div class="img">image</div>    <p class="info">hello world</p></div>

當文字變多的時候會發生什麼事情呢。
我們發現，文字環繞了---這很憂傷
這時候我們可以單獨為P出發我們的BFC
  .info {background: #ccc;color: #fff;overflow: hidden}

實驗

<span style="font-size:18px;"><div class="par"><div class="child"></div><div class="child"></div></div>  .par {            border: 5px solid #fcc;            width: 300px;        }   .child {            border: 5px solid #f66;            width:100px;            height: 100px;            float: left;       }</span>

發生了什麼。float之後的元素沒有撐開我們的盒子，而我們的原則，計算BFC的高度時，浮動元素也參與計算

.par {            border: 5px solid #fcc;            width: 300px;            overflow: hidden;        }

觸發BFC
案例：

<span style="font-size:18px;">  p {            color: #f55;            background: #fcc;            width: 200px;            line-height: 100px;            text-align:center;            margin: 100px;        }       <p>Haha</p><p>Hehe</p></span>

出問題了，BFC裡邊元素margin重疊了

<span style="font-size:18px;"><p>Haha</p><div class="wrap"><p>Hehe</p></div> .wrap {            overflow: hidden;        }</span>