關於盒子模型的BFC總結

BFC全稱是Block Formatting Context，中文意思為：塊級格式化上下文，是Web頁面中盒模型佈局的CSS渲染模式。它的定位體系屬於常規文件流。
以下方式都會隱形建立一個BFC：

設定float的值為left或right；
position的值為absolute或fixed；
display的值為flex，table；
overflow的值為hidden或auto或scroll；
簡單來說，如果一個父級的標籤設定了BFC，則父級標籤下的所有子標籤都是左對齊格式。且父級標籤下的所有兄弟標籤都將出現最常見的三種BFC特性。

兄弟標籤之間的實際顯示的上下邊距是取它們之間的最大值，如果上下邊距一樣，則發生重疊，而不是取上下邊距之和。
HTML：
```
<div class="container">
<p>Sibling 1</p>
<p>Sibling 2</p> 
</div>複製程式碼
```
CSS：

      .container {
        background-color: red; 
        overflow: hidden; 
        width:50%;

      p { 
        background-color: lightgreen;
        margin: 10px 0; 
     }複製程式碼

那麼怎麼處理這種我們並不期望的重疊呢？既然是因為BFC引起的上下邊距重疊，那麼就以毒攻毒，利用BFC來取消這種重疊，變成上下邊距的疊加之和。
上面談到的是，如果父級標籤設定了BFC，父級標籤下的所有兄弟標籤會出現BFC特性（比如上下邊距重疊或取最大值）。那麼，在這個兄弟標籤裡再設定一個BFC，讓兄弟標籤裡再產生一個子標籤，這個子標籤再展示起應該展示的內容，就可以達到取消這種上下邊距重疊的特性。具體如下：
HTML：

<div class="container"> 
        <p>Sibling 1</p>
         <p>Sibling 2</p>
         <div class="divf">
                <p class="ff">float one</p>
         </div>

         </div>複製程式碼

CSS：

      .container {
         background-color: red; 
         overflow: hidden; 
         width:50%;
         /* creates a block formatting context */ }
     p { 
         background-color: lightgreen;
          margin: 10px 0; 
          }
     .divf{
            overflow: hidden;
          }複製程式碼

設定了背景顏色父標籤如果沒有設定BFC，父級標籤下面的兄弟標籤卻又全都設定了float屬性，那麼這個父級標籤並不會被撐開，也就是說父級標籤的背景顏色並不會出現，這是因為float的特性是脫離了文件流的，所以父級標籤不會被撐開。但是如果我們在父級標籤裡面建立一個BFC，則父級標籤就可以被撐開了，它的背景顏色則可以顯示出來。示例如下：
HTML：
```
<div class="containor">
          <div>Sibing</div>
          <div>Sinbing</div>
      </div>複製程式碼
```
CSS：

        .containor{
            overflow: hidden;
            width:500px;
            background: greenyellow;
                 }
        .containor div{
            float: left;
            background: red;
            margin: 10px;
                      }複製程式碼

總結：
其實這裡我們可以這麼來理解：在一個父標籤的容器下，父標籤容器相當於桌子，所有子標籤就像一張桌布一樣，鋪開在桌面上。如果其中一個子標籤設定為浮動，那麼，這個桌布就會變成一個杯子。如果這個桌子上沒有放桌布，直接就放了一個杯子，那麼這個桌子其實上無色的，也就是說桌子的即使設定了背景顏色也不會被撐開看見，必須有要桌布（也就是其他不浮動的兄弟標籤）才行，那如果沒有設定桌布，怎樣讓桌子的背景顏色被呈現呢，因此就給桌子設定一個BFC即可。

使用BFC來防止文字環繞：

在一個父標籤裡面，金黃色區域是一個浮動的兄弟標籤，肉色是行內元素p標籤。事實上，我們可以看到，肉色的p標籤並沒有發生位移，但p標籤的文字發生了位移。由於p標籤本身是沒發生位移的，所以當文字數量增多，此時的浮動元素的大小區域不再影響p標籤的文字後，p標籤的文字就會迴歸正常的p標籤的區域內，因此就出現了這種文字環繞浮動標籤的效果。為了消除這種環繞效果，我們可以利用在p標籤上建立BFC來實現。示例如下：
HTML：

 <div class="containar"> 
            <div class="floated">Floated divdsadas</div>
             <p class="ppp">Quae hic ut ab perferendis sit quod architecto,dolor debitis quam
                 rem provident aspernatur tempora expedita.Quae hic ut ab perferendis sit quod architecto,dolor debitis quam
                 rem provident aspernatur tempora expedita.Quae hic ut ab perferendis sit quod architecto,dolor debitis quam
                 rem provident aspernatur tempora expedita.Quae hic ut ab perferendis sit quod architecto,dolor debitis quam
                 rem provident aspernatur tempora expedita.Quae hic ut ab perferendis sit quod architecto,dolor debitis quam
                 rem provident aspernatur tempora expedita.
             </p> 
                </div>複製程式碼

CSS：

.containar{
            width: 500px;
        }
      .floated{
          float: left;
          background: gold;
          margin:10px 10px;
      }
      .ppp{
          background: blanchedalmond;
          padding:10px;
          overflow: hidden;
      }複製程式碼

效果：

總結：
其實這裡我們可以這麼來理解：在一個父標籤的容器下，父標籤容器相當於桌子，所有子標籤就像一張桌布一樣，鋪開在桌面上。如果其中一個子標籤設定為浮動，那麼，這個地毯就會變成一個杯子，壓在它下一個標籤桌布之上。因為被一個杯子壓著並佔據著空間，所有桌布標籤的文字內容遇到杯子則要繞開走，直到杯子的空間不再佔據著桌布，桌布上的文字又回到了最左邊，就出現了環繞效果。將被杯子壓著的桌布建立一個BFC後，這個桌布就不再被杯子壓著了，而是杯子直接壓著桌子表面，桌布佈置在杯子的旁邊，因為桌布上的文字不可能越過桌布，所以桌布上的文字自然不會環繞著杯子走了。

關於盒子模型的BFC總結

相關文章