談?wù)凚FC

2018-5-14    周周

一、什么是BFC
       BFC(block formatting context）：簡(jiǎn)單來(lái)說(shuō)，BFC 就是一種屬性，這種屬性會(huì)影響著元素的定位以及與其兄弟元素之間的相互作用。
    中文常譯為塊級(jí)格式化上下文。是 W3C CSS 2.1 規(guī)范中的一個(gè)概念， 從樣式上看，具有 BFC 的元素與普通的容器沒(méi)有什么區(qū)別，但是從功能上，具有 BFC 的元素可以看作是隔離了的獨(dú)立容器，容器里面的元素不會(huì)在布局上影響到外面的元素，并且 BFC 具有普通容器沒(méi)有的一些特性,它決定了元素如何對(duì)其內(nèi)容進(jìn)行定位，以及與其他元素的關(guān)系和相互作用。

二、如何觸發(fā) BFC

      上面介紹了 BFC 的定義，那么如何觸發(fā) BFC 呢？
    滿足下面任一條件的元素，會(huì)觸發(fā)為 BFC ：
    1、浮動(dòng)元素，float 除 none 以外的值
    2、絕對(duì)定位元素，position（absolute，fixed）
    3、display 為以下其中之一的值 inline-blocks，table-cells，table-captions
    4、overflow 除了 visible 以外的值（hidden，auto，scroll）

三、BFC布局與普通文檔流布局區(qū)別      
    普通文檔流布局規(guī)則
    1.浮動(dòng)的元素是不會(huì)被父級(jí)計(jì)算高度
    2.非浮動(dòng)元素會(huì)覆蓋浮動(dòng)元素的位置
    3.margin會(huì)傳遞給父級(jí)
    4.兩個(gè)相鄰元素上下margin會(huì)重疊

    BFC布局規(guī)則
    1.浮動(dòng)的元素會(huì)被父級(jí)計(jì)算高度（父級(jí)觸發(fā)了BFC）
    2.非浮動(dòng)元素不會(huì)覆蓋浮動(dòng)元素位置（非浮動(dòng)元素觸發(fā)了BFC）
    3.margin不會(huì)傳遞給父級(jí)（父級(jí)觸發(fā)了BFC）

    4.兩個(gè)相鄰元素上下margin會(huì)重疊（給其中一個(gè)元素增加一個(gè)父級(jí)，然后讓他的父級(jí)觸發(fā)BFC）

   下面來(lái)說(shuō)一下BFC的實(shí)際使用場(chǎng)景
   場(chǎng)景1：解決子盒子都浮動(dòng)時(shí) 父盒子高度不參與計(jì)算問(wèn)題
    <style>
      .far {
         border: 10px solid pink;
         width: 300px;
     }
      .child {
         border: 10px solid yellowgreen;
         width:100px;
         height: 100px;
         float: left;
    }
     .far{
         overflow: hidden;
    }
    </style>
    <body>
        <div class="far">
             <div class="child"></div>
             <div class="child"></div>
        </div>
    </body>

    根據(jù)overflow 除了 visible 以外的值（hidden，auto，scroll）就會(huì)觸發(fā)BFC的原則 計(jì)算BFC高度時(shí) ，floatbox也參與其中。


    場(chǎng)景2：box垂直方向的距離 會(huì)由margin來(lái)決定 相鄰兩個(gè)盒子之間margin會(huì)重疊 ，這就是margin上下間值合并的原因

    <style>
    p {
        color: pink;
        background: #fcc;
        width: 200px;
        height:100px;
        text-align:center;
        margin: 100px;
    }
    </style>
    <body>
       <p></p>
       <p></p>
    </body>

    要解決這個(gè)問(wèn)題我們可以在p外面包裹一層容器，并觸發(fā)該容器生成一個(gè)BFC。那么兩個(gè)P便不屬于同一個(gè)BFC，就不會(huì)發(fā)生margin重疊了,解決代碼如下。
    <style>
       .box {
          overflow: hidden;
       }
       p {
          background: green;
          width: 200px;
          height: 200px;
          margin: 100px;
      }
    </style>
    <body>
       <p></p>
       <div class="box">
           <p></p>
       </div>

    </body>

    場(chǎng)景3：實(shí)現(xiàn)左側(cè)固定右側(cè)自適應(yīng)等類似布局
    <style>
        .out{
            border: 1px solid red;
            height: 200px;
        }
        .left{
            width: 200px;
            height: 150px;
            background-color: green;
            float: left;
        }
        .right{
            background-color: pink;
            height: 250px;
            overflow: hidden;
        }
      </style>
      <body>
     <div class="out">
        <div class="left"></div>
        <div class="right"></div>
      </div>

日歷

鏈接

個(gè)人資料

存檔