理解BFC以及BFC相關佈局問題解決

寫頁面時會遇到：

1. 子元素float父元素的高度不會撐開;
2. 在佈局時，box1and box2,其中box1 float：left，這是box2會在box1下面，(若是文字過多就會造成文字環繞效果)，但我就是想要box2在box1的右側;
3. 又或是上下兩個box的margin重疊。

這些問題除了其餘一些方法解決外，均可以利用加上overflow:hidden，可是why?其實 BFC的做用呢。
BFC??啥？
BFC這個詞....

BFC：全稱box formatting context;即塊格式上下文， block-level元素參與；

那麼什麼是block-level呢？
等等 等等...
'W3C' CSS2.1規範：
Block-level elements are those elements of the source document that are formatted visually as blocks (e.g., paragraphs). The following values of the 'display'property make an element block-level: 'block', 'list-item', and 'table'.
塊級元素是源文檔中被視爲塊（例如段落）可視化格式的那些元素。 'display'屬性的如下值構成一個塊級別：'block'，'list-item'和'table'。

那它是怎麼造成的呢？

如下狀況之一：

• float值不爲none
• position:fixed / absolute
• display:table-cell / table-caption /inline-block / flex / inline-flex.
• overflow屬性不爲visible

咱們知道了什麼是BFC,如何造成BFC，接下來就要說BFC的佈局規則啦
滴滴滴...

1. 內部的box會一個接一個地垂直佈局。
2. 兩個相鄰box的垂直距離由margin決定。屬於同一個BFC的兩個相鄰Box的margin會發生重疊
3. 每一個盒子的左外邊框緊挨着左邊框的包含塊(從左往右的格式化時，不然相反)。即便存在浮動也是如此
4. BFC的區域不會與float box重疊。
5. BFC就是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素。反之也如此。
6. 計算BFC的高度時，浮動元素也參與計算.

該知道的理論也差很少了，該解答了~
問題1：子元素float父元素的高度不會撐開

<section class="container">
        <style>
            .container{
                color:#FFF;
                width: 300px;
                margin:100px auto;
                border:1px solid #330033;
            }
            .left{
                float: left;
                width: 100px;
                height: 80px;
                background: #FF0066;
            }
            .right{
                background: #FFCCFF;
            }    
        </style>
        <div class="left">我是left</div>
        <div class="right">我是right</div>
    </section>

效果：

咱們看到container只是right的高，而left中float使該元素脫離了文檔流它的高沒有計算在內，如今要想left的高度計算在內，根據BFC佈局規則6就能夠，造成一個BFC區不就能夠計算float的高度嘍，來，上碼：

.container{
                color:#FFF;
                width: 300px;
                margin:100px auto;
                border:1px solid #330033;
                overflow: hidden;
            }

果然嘿，其實，這裏不止加overflow：hidden,加上邊介紹任何一種能夠造成BFC區奏行，好比：overflow: auto; / float: left; /display: flex;等等，根據項目中的實際需求。

2.問題2：box2在box1右側
在問題1裏的代碼基礎上，把right區增長一個高度好比300px，就能夠看到效果liu

.right{
                background: #FFCCFF;
                height: 300px;
                overflow: hidden;
            }

因爲left塊float的緣由，致使right在left下面，解決此問題
根據BFC佈局規則4 ：BFC的區域不會與float box重疊，那麼right造成BFC區
效果：

哇，好了呀！

問題3：magin重疊問題

<section class="container">
        <style>
            .container{
                color:#FFF;
                width: 300px;
                margin:100px auto;
                border:1px solid #330033;
                overflow: auto;
            }
            .box1,.box2{
                height: 50px;
            }
            .box1{
                background: #FF0066;
                margin-bottom:20px;
            }
            .box2{
                background: #FFCCFF;
                margin-top:50px;
            }            
        </style>
        <div class="box1">我是box1</div>
        <div class="box2">我是box2</div>
    </section>

咱們大多覺得是80px，可結果倒是50px!
why?
BFC原則2指明瞭同一個BFC區的margin垂直重疊，不在同一個是否是就不重疊了，來來來

...
        .wrapper{
               overflow:hidden;
          }  
        ...
        <div class="wrapper">
             <div class="box1">我是box1</div>
        </div>       
        <!-- <div class="wrapper"> -->
        <div class="box2">我是box2</div>
        <!-- </div> -->

ok!經過給box1或box2添加一個父元素造成和另外一個不在同一區。

關於垂直margin摺疊

• 兩個相鄰的外邊距都是正數時，摺疊結果是它們二者之間較大的值;
• 兩個相鄰的外邊距都是負數時，摺疊結果是二者絕對值的較大值;
• 兩個外邊距一正一負時，摺疊結果是二者的相加的和;

最後的最後，歡迎指正~