【前端工程師手冊】BFC筆記

時間 2019-11-06

標籤前端工程師手冊 bfc 筆記简体版

原文原文鏈接

什麼是BFC

首先呢，BFC的全稱是Block Formatting Context，BFC其實就是頁面上的一塊區域，有它本身的渲染規則，決定了其內部子元素的定位等等。並且BFC內部的box的佈局，與這個容器外的絕不相關。css

BFC有哪些特性

在同一個BFC元素中，其子元素按照文檔流一個接一個的排列，並且垂直相鄰的兩個塊級元素在上下邊距可能會發生外邊距（margin）合併，爲何說是可能呢，由於即便在同一個BFC中發生了外邊距合併也有其餘的解決辦法（MDN-外邊距合併）
建立了BFC的元素不會與浮動元素重疊，而且會出如今浮動元素所在行的剩餘空間（若是放的下的話）
建立了BFC的元素計算高度時會算上浮動元素，也就是說在建立了BFC的元素內部，浮動元素不會形成父元素塌陷

BFC如何建立

根元素。我本身測試的是<HTML>元素會本身建立一個BFC
浮動元素，即float取值不是none的元素
overflow不是visible的元素，這個常常用來清除浮動
display爲tabel-cell、table-caption或inline-block

BFC有哪些用途

防止被浮動元素遮蓋，好比實現兩欄佈局html
```
.aside {
     background: red;
     width: 170px;
     height: 600px;
     float: left;
   }
   .main {
     background: green;
     height: 700px;
   }
   <div class="aside"></div>
   <div class="main"></div>
```
側欄aside把主欄main遮住了一部分，根據上面說的BFC特性第二點：建立了BFC的元素不會與浮動元素重疊，而且會出如今浮動元素所在行的剩餘空間，設置main的overflow: hidden
app

解決上下相鄰的兩個塊級外邊距合併（建立了BFC的元素和它的子元素不會發生摺疊）ide

.up {
     height: 100px;
     background: red;
     margin-bottom: 20px;
   }
   .down {
     height: 100px;
     background: green;
     margin-top: 10px;
   }
   <div class="up"></div>
   <div class="down"></div>

原本上下兩個元素間距應該是30px可是如今倒是20px，如今分別把這兩個元素放入不一樣的BFC佈局

<div class="wrapper">
       <div class="up"></div>
   </div>
   <div class="wrapper">
       <div class="down"></div>
   </div>
   .wrapper {
     overflow: hidden;
   }

清除浮動
浮動元素會帶來父元素高度塌陷測試

<div class="out">
       <div class="in"></div>
   </div>
   .out {
     border: 1px solid;
     padding: 10px;
     /* overflow: hidden; */
   }
   .in {
     width: 100px;
     height: 100px;
     background: red;
     float: left;
   }

根據上面說的BFC特性第三點，設置out元素爲overflow: hidden
ui