高端的bfc

BFC?

bfc是什麼？ 老實說在別人第一次問起我時，我也不知道是什麼東西，但是在自己深入瞭解過後，就會發現… 噢 原來是這個啊 只要對css文檔流以及佈局熟練的人可能只感覺BFC就是一個比較高大上的名字而已。

BFC是什麼

BFC(Block Formatting Context)是Web頁面中盒模型佈局的CSS渲染模式。它的定位體系屬於常規文檔流。

如何新建一個bfc容器？

1. overflow:scroll和overflow: hidden.
2. display: flex和display: table.
3. float:left
4. display:inline-block
5. position:absolute
   上述幾個方法也都說明了除了overflow屬性外，其餘的都改變了本元素的文檔流結構，使其脫離出原來的bfc成爲一個新的bfc容器，一般我們都是用overflow屬性，不會影響到本身的佈局
   一個創建bfc的例子
   

css:
      #ul2{
          width: 1000px;
          background-color: aqua;
          overflow: hidden;
          height: 200px;
      }
      #li1{
          float: left;
          width: 100px;
          height: 100px;
          border: 1px solid blue;
      }
      #li2{
          overflow: hidden;
          border: 1px solid blue;
      }
      #li3{
          display:inline-block;
          border: 1px solid blue;
      }
      #li4{
          position: absolute;
          border: 1px solid blue;
      }
      #ul2>li{
            margin:10px 0;
      }
html：
<p>新建一個bfc容器:</p>
<ul id="ul2">
    <li id="li1">float:left</li>
    <li id="li2">overflow:hidden 你看看我的下外邊距</li>
    <li id="li3">display:inline-block 你看看我的上外邊距</li>
    <li id="li4">position:absolute</li>
</ul>
<p>注意看 上面藍色裏的bfc已經不能影響到藍框元素的了 他們都是脫離出來成爲新的bfc了所以藍色容器的bfc規則已經失效了</p>

bfc容器的規則

上面提到了bfc規則那麼bfc規則是什麼呢?
1. 一個bfc內部和外部是不會互相影響的。
2. bfc容器佈局內部是從容器頂部開始
3. 同一個bfc容器內的兩個元素的垂直margin會發生重疊(具體下面會詳細解釋)
4. 每個盒子的左邊界都會包容容器的左邊界(塊級元素單獨成行)
一個bfc容器的例子

      #ul{
          width:1000px;
          background-color: antiquewhite;
          overflow: hidden;
      }
      #ul>li{
          list-style: none;
          display: block;
          border: 1px solid blue;
          margin: 25px 0;
      }
<p>一個bfc容器的規則:</p>
   <ul id="ul">
       <li>1.給一個元素創建bfc就是給其創建一個新的容器容器外部和內部不會互相影響</li>
       <li>2.盒子模型佈局是從容器頂部開始</li>
       <li>3.同一個bfc中兩個塊級元素垂直margin會發生摺疊</li>
       <li>4.每個盒子的左邊界都包容容器左邊界（塊級元素單獨成行）</li>
   </ul>

通過上面的解釋相信大家都明白了bfc是什麼了，下面讓我們來看看bfc在佈局上有哪些應用

bfc實際應用

1.元素垂直margin重疊問題

下圖是個很好的例子

很奇怪吧，bfc內容器垂直margin疊加的規則已經很清楚了

#ul3{
            width: 1000px;
            background-color: cadetblue;
            overflow: hidden;
            height: 200px;

        }
        #ul3>li{
            list-style: none;
            border: 1px solid blue;
        } 
        #li11{
            margin-bottom: 15px;
        }
        #li22{
            margin-top: 20px;
            margin-bottom: -10px;
        }
        #li33{
            margin-top: 20px;
            margin-bottom: -15px;
        }
        #li44{
            margin-top: -10px;
        }
<ul id="ul3">
    <li id="li11">margin-bottom: 15px 我和下面的間距是20px</li>
    <li id="li22">margin-top: 20px; margin-bottom: -10px; 我和下面的間距是10px</li>
    <li id="li33">margin-top: 20px; margin-bottom: -15px; 我和下面的間距是 -15px</li>
    <li id="li44">margin-top: -10px;</li>
</ul>
<p>全部都爲正值，取最大者；不全是正值，則都取絕對值，然後用正值減去最大值；沒有正值，則都取絕對值，然後用0減去最大值</p>

解決bfc容器內外邊距最常用辦法就是讓其成爲一個新的bfc容器

        #ul4{
            width: 1000px;
            background-color: chartreuse;
            overflow: hidden;
            height: 500px;
        }
        #ul4>li{
            border: 1px solid blue;
        }
        #li111{
            margin: 30px 0;
        }
        #li222{

            padding: 40px 0;
            margin-bottom: 20px;
        }
        #li333{
            margin: 50px 0;
            display:inline-block
        }
        <p>解決辦法:</p>
        <ul id="ul4">
            <li id="li111">margin: 30px 0 1:若是與父元素髮生重疊 父元素 overflow:hidden</li>
            <li id="li222"> margin: 40px 0 2:padding替代margin 缺點 元素內容會變大</li>
            <li id="li333">margin: 50px 0 3:元素成爲bfc容器</li>
        </ul>

2.float父元素坍塌問題

我們經常會用到float這個屬性但是卻忽視了復原坍塌這個問題
下面的父元素是有backgroun-color的,並且有一個很小的高度(爲了讓它顯示出來)

        #father{
            width: 1080px;
            background-color: #767676;
        }
        #son1{
            width: 30%;
            float: left;
            height: 500px;
            border: 1px solid blue;
        }
        #son2{
            width: 50%;
            height: 400px;
            border: 1px solid blue;
            float: right;
        }
        <p>父元素包含浮動坍塌</p>
        <div id="father">我怎麼塌了
            <div id="son1"></div>
            <div id="son2"></div>
            <div id="ways"></div>
        </div>

具體大家可以自己去試一試，我就不給大家演示了

浮動文字環繞問題

文字環繞有時候是很方便，但有事後確實很麻煩
如下例子

         #box{
            width: 800px;
            height: 300px;
            border: 1px solid blue;
            overflow:hidden
        }
        /*#box>p{
            overflow: hidden;
        }  */ //這是解決辦法
        #img{
            width: 200px;
            height: 200px;
            background-color: red;
            float: left;
        }
         <div id="box">
         <div id="img"></div>
         <p>文字環繞文字環繞文字環繞文字環繞文字環繞文字環繞文字環繞文字環繞文字環繞文字環繞文字環繞文字環繞文字環繞文字環繞文字環繞文字環繞文字環繞文字環繞文字環繞文字環繞文字環繞文字環繞文字環繞文字環繞文字字環繞文字環繞文字環繞文字環繞文字環繞文字環繞文字環繞文字環繞文字環繞文字環繞文字環繞文字環繞文字環繞文字環繞文字環繞文字環繞文字環繞文字環繞文字環繞文字環繞文字環繞文字環繞文字環繞</p>
        </div>

爲什麼會出現這種情況呢? 首先大容器box成爲一個bfc容器，其子元素都是應用於bfc規則的,但是img它float了成爲了一個新的bfc不再受box容器裏規則約束，float特性(即明顯的脫離了文檔流(並不是真正的脫離) 它佔據一定空間)
float假設他脫離了文檔流 ，他後面的元素就會像bfc規則一樣，從上到下，貼緊box的左邊框，但是由於float佔一定的空間 所以文字上面的一部分就會向右空出來一部分給img。從而形成文字環繞效果，float屬性原本就是設計給文字環繞的
解決方法很明顯 讓p也變成一個bfc容器就可以了 不影響佈局的方式就是overflow：hidden了

以上就是bfc的基本內容了，其實關於css佈局渲染方面還有些內容

IFC(Inline Formatting Contexts)內聯格式化上下文,
FFC(GridLayout Formatting Contexts)自適應格式化上下文
GFC(Flex Formatting Contexts)網格佈局格式化上下文、
大家可以多瞭解一些，其是這些東西就是佈局方面的規則基礎，只是將其明文化，在實踐中都可以自己探索出來