首先BFC是啥？

**官方描述：塊格式化上下文（Block Formatting Context，BFC）是 Web 頁(yè)面的可視 CSS 渲染的一部分，是塊級(jí)盒子的布局過(guò)程發(fā)生的區(qū)域，也是浮動(dòng)元素與其他元素交互的區(qū)域。

額......

是的，正常人看完還是不知道BFC是啥。

我用人類的語(yǔ)言嘗試翻譯一下：BFC就是一個(gè)就是一個(gè)容器。只不過(guò)這個(gè)容器里面元素怎么布局都不會(huì)影響外面的元素，外面的元素同樣也影響不到這個(gè)盒子里面的元素。

好......

看完差不多你就該問(wèn)了，？？？到底怎么影響了？

好嘛，不要急......

不設(shè)置BFC會(huì)對(duì)網(wǎng)頁(yè)布局有怎么樣的影響？

    .box1 {
      width: 400px;
      border: 10px solid pink;
    }
    .c-box1 {
      width: 200px;
      height: 200px;
      background-color: skyblue;
      float: left;
    }
    .c-box2 {
      width: 200px;
      height: 200px;
      background-color: blueviolet;
      float: left;
    }
    .box2 {
      width: 300px;
      height: 300px;
      background-color: red;
    }
<div class="box1">
    <div class="c-box1">
    </div>
    <div class="c-box2">
    </div>
</div>
<div class="box2"></div>

由于box1沒(méi)有設(shè)置高度，box1里面的元素設(shè)置浮動(dòng)后，無(wú)法將其撐起，從而影響到了外面的box2。那么如果box1是一個(gè)BFC的話，那么效果就會(huì)如下圖一樣：

給box1加上 overflow: hidden;沒(méi)錯(cuò)這就是讓一個(gè)容器形成BFC的一種方式。

 .box1 {
      width: 400px;
      border: 10px solid pink;
      overflow: hidden;
  }

?。烤途途?.....就這？那么你肯定想問(wèn)這個(gè)BFC還有其他作用嗎？

BFC還有啥作用？

- 解決盒子高度塌陷的問(wèn)題

沒(méi)錯(cuò)，也就是上面那種情況。

- 解決盒子margin塌陷的問(wèn)題

.box1 {
      width: 100px;
      height: 100px;
      background-color: purple;
      margin-bottom: 30px;
 }
.box2 {
      width: 100px;
      height: 100px;
      background-color: red;
      margin-top: 10px;
 }
 <div class="box1"></div>
 <div class="box2"></div>

盒子垂直方向的margin是存在塌陷問(wèn)題，box2設(shè)置的10px向上的margin沒(méi)起作用。所以，把box1和box2變成一個(gè)BFC就可以解決這個(gè)問(wèn)題。

- 可以防止元素被相鄰的浮動(dòng)盒子覆蓋

    .box1 {
      float: left;
      width: 150px;
      height: 200px;
      background-color: purple;
     }
    .box2 {
      width: 200px;
      height: 200px;
      background-color: red;
    }
    <div class="box1"></div>
    <div class="box2"></div>

這種情況，除了可以box2設(shè)置overflow: hidden; 還可以設(shè)置float: left。

沒(méi)錯(cuò)，上面一直用使用overflow: hidden來(lái)設(shè)置BFC,其實(shí)設(shè)置浮動(dòng)也是一種形成BFC的方式。那么還有沒(méi)有其他方式？答案是肯定的。

都有哪些方式來(lái)創(chuàng)建BFC

- 設(shè)置浮動(dòng)，不管是左浮動(dòng)還是右浮動(dòng)都可以，float屬性值不是none即可

- 設(shè)置定位，position的值不是static或者ralative

- 設(shè)置display，display的值是inline-block、flex或者inline-flex

- overflow值不為 visible，為 auto、scroll或者h(yuǎn)idden

完結(jié)感想

有沒(méi)有發(fā)現(xiàn)創(chuàng)建一個(gè)BFC容器其實(shí)大部分是為了解決浮動(dòng)布局所引起的問(wèn)題，另外一種說(shuō)法就叫清除浮動(dòng)。浮動(dòng)布局常見(jiàn)于一些PC端門戶網(wǎng)站，因?yàn)槿温毜墓局饕菍?xiě)移動(dòng)端H5，常用的flex布局、定位這些無(wú)意間已經(jīng)是在創(chuàng)建BFC，而且基本上沒(méi)有用到浮動(dòng)，所以對(duì)這塊知識(shí)是比較模糊的。不過(guò)概念還是得捋清楚，面試好像挺喜歡問(wèn)關(guān)于這個(gè)BFC的問(wèn)題。

以上就是設(shè)置BFC功能及使用示例詳解的詳細(xì)內(nèi)容，更多關(guān)于BFC 設(shè)置使用的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論