BFC定義

格式化上下文(Block Formatting Context),是Web頁面的可視化CSS渲染的一部分，是塊盒子的佈局過程發生的區域，也是浮動元素與其餘元素交互的區域。html

BFC的佈局規則

內部的Box會垂直排列，一個接着一個放置
Box垂直方向的距離由margin決定，在同一個BFC內，相鄰的兩個Box的margin會發生重疊
每一個盒子(塊盒與行盒)的margin box的左邊，與包含塊border box的左邊相接觸(對於從左往右的格式化，不然相反)。即便存在浮動也是如此。
BFC的區域不會與float box重疊
BFC就是頁面上一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素，反之也是如此
計算BFC的高度時，浮動元素也參與計算

如何建立BFC

float的值不是none
position的值不是relative，static
display的值是inline-block，table-cell，flex，table-caption，inline-flex
overflow的值不是visible

BFC的做用

利用BFC避免margin重疊

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    *{
      margin:0;
    }
    p{
      margin:30px;
    }
    .p1{
      width: 100px;
      height: 100px;
      background-color: yellowgreen;
    }
    .p2{
      width: 100px;
      height: 100px;
      background-color: rebeccapurple;
    }
  </style>
</head>
<body>
  <p class="p1"></p>
  <p class="p2"></p>
</body>
<script>
</script>
</html>

實現的效果以下圖佈局

根據第二條，屬於同一個BFC的兩個相鄰的Box會發生margin重疊，因此咱們能夠設置，兩個不一樣的BFC，也就是咱們可讓把第二個p用div包起來，而後激活它使其成爲一個BFCflex

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    *{
      margin:0;
    }
    p{
      margin:30px;
    }
    .p1{
      width: 100px;
      height: 100px;
      background-color: yellowgreen;
    }
    .p2{
      width: 100px;
      height: 100px;
      background-color: rebeccapurple;
    }
    div{
      overflow: hidden;
    }
  </style>
</head>
<body>
  <p class="p1"></p>
  <div>
    <p class="p2"></p>
  </div>
</body>
<script>
</script>
</html>

自適應兩欄佈局

根據每一個盒子的margin box的左邊，與包含塊border box的左邊相接觸(對於從左往右的格式化，不然相反)。即便存在浮動也是如此。spa

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    *{
      margin:0;
    }
    div{
      color:#fff;
      text-align: center;
    }
    .left{
      float: left;
      width: 100px;
      height: 100px;
      background-color: yellowgreen;
    }
    .right{
      height: 300px;
      background-color: rebeccapurple;
    }
  </style>
</head>
<body>
  <div class="left">left</div>
  <div class="right">right</div>
</body>
<script>
</script>
</html>

頁面效果code

又由於BFC區域不會與float box重疊，因此咱們讓right單獨成爲一個BFCorm

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    *{
      margin:0;
    }
    div{
      color:#fff;
      text-align: center;
    }
    .left{
      float: left;
      width: 100px;
      height: 100px;
      background-color: yellowgreen;
    }
    .right{
      height: 300px;
      background-color: rebeccapurple;
      overflow: hidden;
    }
  </style>
</head>
<body>
  <div class="left">left</div>
  <div class="right">right</div>
</body>
<script>
</script>
</html>

頁面效果以下htm

right會自動的適應寬度，這時候就造成了一個兩欄自適應的佈局blog

清除浮動

當咱們不給父節點設置高度，子節點設置浮動的時候，會發生高度塌陷，這個時候咱們就要清除浮動。ip

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    *{
      margin:0;
    }
    .container{
      border:5px solid yellow;
      background-color: seagreen;
    }
    .container >div{
      width: 300px;
      height: 300px;
      float: left;
    }
    .child1{
      background-color: yellowgreen;
    }
    .child2{
      background-color: rebeccapurple;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="child1"></div>
    <div class="child2"></div>
  </div>
</body>
<script>
</script>
</html>

效果以下：it

這個時候咱們根據最後一條：計算BFC的高度時，浮動元素也參與計算。給父節點激活BFC

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    *{
      margin:0;
      padding:0;
    }
    .container{
      border:5px solid yellow;
      background-color: seagreen;
      overflow: hidden;
    }
    .container >div{
      width: 300px;
      height: 300px;
      float: left;
    }
    .child1{
      background-color: yellowgreen;
    }
    .child2{
      background-color: rebeccapurple;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="child1"></div>
    <div class="child2"></div>
  </div>
</body>
<script>
</script>
</html>

效果如圖：

總結

以上例子都體現了：

BFC就是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素。反之也如此。

由於BFC內部的元素和外部的元素絕對不會互相影響，所以，當BFC外部存在浮動時，它不該該影響BFC內部Box的佈局，BFC會經過變窄，而不與浮動有重疊。一樣的，當BFC內部有浮動時，爲了避免影響外部元素的佈局，BFC計算高度時會包括浮動的高度。避免margin重疊也是這樣的一個道理。

什麼是BFC

BFC定義

BFC的佈局規則

如何建立BFC

BFC的做用