BFC 的理解和應用

時間 2020-07-21

標籤 bfc 理解應用简体版

原文原文鏈接

定義：全稱是 Block Formatting Context，即塊格式化上下文；BFC 是一個獨立的佈局環境，其中的元素佈局是不受外界的影響，而且在一個 BFC 中，塊盒與行盒（行盒由一行中全部的內聯元素所組成）都會垂直的沿着其父元素的邊框排列面試

一個塊格式化上下文由如下之一建立：佈局

根元素HTML或其它包含它的元素
浮動元素 (元素的 float 不是 none)
絕對定位元素 (元素具備 position 爲 absolute或 fixed)
內聯塊 (元素具備 display: inline-block)
表格單元格 (元素具備 display: table-cell，HTML 表格單元格默認屬性)
表格標題 (元素具備 display: table-caption, HTML 表格標題默認屬性)
具備overflow 且值不是 visible 的塊元素
display: flow-root
column-span: all 應當老是會建立一個新的格式化上下文，即使具備 column-span: all 的元素並不被包裹在一個多列容器中

在工做和麪試中，總會碰到 BFC，而 BFC 的解釋又很難理解，這時能夠結合一個例子進行講解，如下應用場景都可做爲觸發 BFC 的使用案例spa

使用場景

外邊距合併
浮動元素或定位元素脫離文檔流致使父元素高度丟失
清除浮動
兄弟元素其中一個元素浮動，其餘兄弟元素佔有該元素位置，須要設置margin進行隔離

以上爲開發中經常使用場景，還有其餘場景不一一列舉，都可使用觸發 BFC 解決code

應用一：父元素高度塌陷/外邊距合併

1.在父元素裏子元素div設置marginTop，致使父元素總體高度塌陷orm

<style>
  * {
    margin: 0;
    padding: 0;
  }
  .a1_1 {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 1px solid blue;
    width: 200px;
  }
  .bfc {
    overflow: hidden;
  }
</style>

<body>
  <div class="a1">
    <div class="a1_1">context1</div>
    <div class="a1_2">context2</div>
  </div>
</body>

// 解決辦法父元素添加`overflow: hidden`觸發BFC
<body>
  <div class="a1 bfc">
    <div class="a1_1">context1</div>
    <div class="a1_2">context2</div>
  </div>
</body>
複製代碼

2.在兄弟元素div設置marginTop，marginBottom致使相鄰元素外邊距合併開發

<style>
  * {
    margin: 0;
    padding: 0;
  }
  .a1_1 {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 1px solid blue;
    width: 200px;
  }
  .a1_2 {
    margin-top: 20px;
    border: 1px solid red;
    width: 200px;
  }
  .bfc {
    overflow: hidden;
  }
</style>
// a1_1和a1_2margin合計爲20px
<body>
  <div class="a1 bfc">
    <div class="a1_1">context1</div>
    <div class="a1_2">context2</div>
  </div>
</body>

// 解決辦法在其中一個元素上添加一層div同時添加`overflow: hidden`觸發BFC
<body>
  <div class="a1 bfc">
    <div class="a1_1">context1</div>
    <div class="bfc">
      <div class="a1_2">context2</div>
    </div>
  </div>
</body>
複製代碼

應用二：浮動元素或定位元素脫離文檔流致使父元素高度丟失

<style>
  .a1_1 {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 1px solid blue;
    width: 200px;
    float: left;
  }
  .a1_2 {
    margin-top: 20px;
    border: 1px solid red;
    width: 200px;
    float: left;
  }
  .bfc {
    overflow: hidden;
  }
</style>
// 子元素均浮動、父元素a1的高度是0
<body>
  <div class="a1">
    <div class="a1_1">context1</div>
    <div class="a1_2">context2</div>
  </div>
</body>
// 解決辦法在父元素上添加添加`overflow: hidden`觸發BFC，父元素a1高度有了
<body>
  <div class="a1 bfc">
    <div class="a1_1">context1</div>
    <div class="a1_2">context2</div>
  </div>
</body>
複製代碼

應用三：清除浮動

<style>
  .a1_1 {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 1px solid blue;
    width: 200px;
    float: left;
  }
  .a1_2 {
    margin-top: 20px;
    border: 1px solid red;
    width: 200px;
    float: left;
  }
  .bfc {
    overflow: hidden;
  }
  .clear {
    clear: both;
  }
</style>
// 子元素均浮動，因爲父元素無高度，後面元素位置會靠前排列，這並非咱們想要的
<body>
  <div class="a1">
    <div class="a1_1">context1</div>
    <div class="a1_2">context2</div>
  </div>
  <div>
    other content
  </div>
</body>
// 解決方法1：清除浮動，在浮動元素同級最後添加一個div設置清除浮動樣式`clear:both`、不觸發BFC
<body>
  <div class="a1">
    <div class="a1_1">context1</div>
    <div class="a1_2">context2</div>
    <div class="clear"></div>
  </div>
  <div>
    other content
  </div>
</body>
// 解決方法2: 給浮動元素的父元素設置`overflow:hidden`，觸發BFC
<body>
  <div class="a1 bfc">
    <div class="a1_1">context1</div>
    <div class="a1_2">context2</div>
  </div>
  <div>
    other content
  </div>
</body>
複製代碼

應用四：兄弟元素其中一個元素浮動，其餘兄弟元素佔有該元素位置

<style>
  .a1_1 {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 1px solid blue;
    width: 200px;
    float: left;
  }
  .a1_2 {
    margin-top: 20px;
    border: 1px solid red;
    height: 100px;
  }
  .bfc {
    overflow: hidden;
  }
  .clear {
    clear: both;
  }
</style>
// a1_1浮動, a1_2會覆蓋a1_1的位置，可設置margin-left解決
<body>
  <div class="a1 bfc">
    <div class="a1_1">context1</div>
    <div class="a1_2">context2</div>
  </div>
  <div>
    other content
  </div>
</body>

// 解決方法: 給非浮動元素設置`overflow:hidden`，觸發BFC
<body>
  <div class="a1 bfc">
    <div class="a1_1">context1</div>
    <div class="a1_2 bfc">context2</div>
  </div>
  <div>
    other content
  </div>
</body>
複製代碼

總結

BFC就是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素。同時外面的元素也不會影響容器元素。因此當BFC外部存在浮動元素時，不影響BFC內部元素佈局，當BFC內部有浮動時，爲了避免影響外部元素的佈局，BFC計算高度時會包括浮動的高度。避免margin重疊文檔

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。