前言

在前端佈局中，咱們可能沒有據說過BFC, 但咱們必定在不少地方用到過BFC，不少開發者對BFC的做用只是將將說出來，並非說的很清楚，基於此，本文就來深刻探討一下CSS中的BFC。css

全文概要

1 FC是什麼

在講BFC以前，咱們先回顧一網頁佈局中的文檔流。常見的文檔流有三種：標準流、浮動流、定位流，BFC中的FC就是其中的標準流。
有關文檔流的內容可看我以前文章：juejin.cn/post/695983…html

FC全稱：Formatting Context，名爲「格式化上下文」，是指具備某種CSS格式化規則（佈局規則）的上下文環境，在這個上下文環境的全部子元素，都將根據其特定的CSS格式化規則進行排列。前端

咱們能夠給某個做爲容器的元素指定特定的格式化上下文，此時這個元素就是具備特定的佈局規則的渲染區域。常見的格式化上下文有：markdown

BFC（塊級格式化上下文）
IFC（內聯格式化上下文）
FFC（自適應格式化上下文）
GFC（網格佈局格式化上下文）

2 BFC是什麼

全稱爲：塊級格式化上下文，是一個外部獨立渲染的區域。
是一種規則，做用就是隔離保護，裏面的元素經過BFC佈局，不會對外面的元素產生影響。
是元素的一種屬性，當某個元素有了BFC，這個元素就能夠看作被是隔離了，獨立容器。

BFC就比如西遊記裏孫悟空畫了一個圈讓師傅和師弟呆在圈裏，這樣妖精就不能傷害師傅師弟，這個圈就是BFC，做用就是隔離保護，實際工做中咱們也是利用BFC來解決實際問題。佈局

3 如何觸發BFC

並非任意一個元素均可以當作BFC，只有當這個元素知足下面其中之一條件時，這個元素才能夠當作一個BFC。post

float不爲none(left、right)
position不爲relative (absolute、fixed)
overflow不爲visible (hidden、auto、scroll)
display 爲flex，line-block，table-cell，table-caption
html根元素

4 BFC特性

內部的 Box 會在垂直方向上一個接一個的放置
垂直方向上的距離由 margin 決定
BFC 的區域不會與 float 的元素區域重疊
計算 BFC 的高度時，浮動元素也參與計算
一個BFC區域只包含其子元素，不包括其子元素的子元素

5 BFC應用場景

在瞭解觸發BFC條件和特性後，咱們須要利用BFC特色來解決一些在佈局中實際問題，其中BFC最大特色就是：每個BFC區域都是相互獨立，互不影響的。flex

5.1 解決外邊距合併問題

5.11 外邊距合併

當垂直排列的兩個塊級元素，同時給上面的盒子設置margin-bottom和下面的盒子設置margin-top，此時會造成外邊距合併，當兩個值相等時就是該值，當兩個值不一樣時就是較大的那個值。spa

<head>
<meta charset="utf-8" />
<title>外邊距合併</title>
<style> *{ margin:0 auto; padding:0 } .box{ width:100px; height:100px; background-color:pink; margin-bottom:100px; } .box:last-of-type{ background-color:aquamarine; margin-top:100px; } </style>
</head>
<body>
	<div class="box"></div>
	<div class="box"></div>
</body>
複製代碼

5.12 解決方案

將兩個div放置在不一樣的BFC，這樣這兩個BFC的內容將不會互相干擾，把兩個BFC分別包裹在兩個container容器中，利用overflow:hidden觸發container的BFC。3d

<head>
<meta charset="utf-8" />
<title>外邊距合併問題解決</title>
<style> *{ margin:0 auto; padding:0 } .box{ width:100px; height:100px; background-color:pink; margin-bottom:100px; } .container:last-of-type .box{ background-color:aquamarine; margin-top:100px; } .container{ overflow:hidden; } </style>
</head>
<body>
  <div class="container">
    <div class="box"></div>
  </div>
  <div class="container">
    <div class="box"></div>
  </div>
</body>
複製代碼

5.2 解決外邊距塌陷問題

5.21 外邊距塌陷

嵌套的兩個塊級元素給子元素設置向上的外邊距，此時父元素會跟着掉下來，造成的是外邊距塌陷。code

<head>
<meta charset="utf-8" />
<title>外邊距塌陷</title>
<style> *{ margin:0; padding:0 } .father{ width:300px; height:200px; background-color:aquamarine; } .son{ width:100px; height:100px; background-color:pink; margin-top:100px; } </style>
</head>
<body>
	<div class="father">
	  	<div class="son"></div>
	  </div>
</body>
複製代碼

5.22 解決方案

給父元素設置1像素的內邊距或者外邊框
給父元素開啓BFC

<head>
<meta charset="utf-8" />
<title>外邊距塌陷問題解決</title>
<style> *{ margin:0; padding:0 } .father{ width:300px; height:200px; /* 給父元素設置1像素的內邊距或者外邊框 */ border-top:1px solid transparent; /* 給父元素開啓BFC */ /* overflow: hidden; */ background-color:aquamarine; } .son{ width:100px; height:100px; background-color:pink; margin-top:100px; } </style>
</head>
<body>
<div class="father">
  	<div class="son"></div>
  </div>
</body>
複製代碼

5.3 清除浮動

先看一個例子，父親包裹着子元素，當咱們設置浮動後，子元素脫離文檔流，父元素高度爲0 。

<head>
<meta charset="utf-8" />
<title>清除元素浮動</title>
<style> *{ margin:0; padding:0 } .father{ background-color:aquamarine; } .son{ width:100px; height:100px; background-color:pink; float:left; } </style>
</head>
<body>
<div class="father">
  	<div class="son"></div>
  </div>
</body>
複製代碼

經過overflow屬性觸發BFC，父元素將會包裹子元素，從而達到清除浮動做用。

.father{
    background-color:aquamarine;
    overflow:hidden;
}
複製代碼

5.4 阻止元素被浮動元素覆蓋

當左側盒子設置浮動後，浮動元素會覆蓋了沒有添加浮動的元素。

<head>
<meta charset="utf-8" />
<title>阻止元素被浮動元素覆蓋 </title>
<style> *{ margin:0; padding:0 } .floatDiv{ width:100px; height:200px; background-color:aquamarine; float:left; } .normalDiv{ width:200px; height:200px; background-color:pink; } </style>
</head>
<body>
    <div class="floatDiv">1</div>
    <div class="normalDiv">233333332</div>
</body>

複製代碼

但這並非咱們想要的結果，咱們能夠觸發.normalDiv的BFC來解決這個問題。普通流體BFC後，和浮動元素不會產生交集，順着浮動元素造成本身的封閉上下文。

.normalDiv{
   overflow: hidden;
}
複製代碼

結語

本篇文章就到此爲止啦，因爲本人經驗水平有限，不免會有紕漏，對此歡迎指正。如以爲本文對你有幫助的話，歡迎點贊收藏❤❤❤，寫做不易，持續輸出的背後是無數個日夜的積累，您的點贊是持續寫做的動力，感謝支持。

【CSS】CSS中潛藏着的BFC

前言