雖然可能你沒聽過BFC是什么，但是你一定用過，其是一種在CSS中存在的技術，你可能只是一直不知道有這樣一個專業名詞，本文就來介紹一下到底什么是BFC
- 公眾號：前端印象
- 不定時有送書活動，記得關注~
- 關注后回復對應文字領取：【面試題】、【前端必看電子書】、【資料結構與演算法完整代碼】、【前端技術交流群】
一起來理解BFC的作用
- 一、什么是BFC
- 二、如何觸發BFC
- 三、BFC的相關案例
- （1）清除浮動
- （2）margin-top塌陷
- （3）垂直方向的margin重疊
- （4）自適應布局
- 四、結束語
一、什么是BFC
首先參考一下WC3對BFC的專業解釋
BFC（Block Formatting Context）：翻譯成中文叫做塊級格式化背景關系，它決定了元素如何對其內容進行定位，以及與其它元素的關系和相互作用，當涉及到可視化布局時，其提供了一個環境，元素在這個環境中按照一定的規則進行布局排列
換句話說，BFC就是為元素提供一個獨立的容器，在該容器里按照一定的規則進行布局排列，該容器內的元素不會影響外部的元素，同理，外部的元素也不會影響內部的元素
二、如何觸發BFC
先來了解一下有哪些條件可以觸發BFC：
float不為noneposition為absolute或fixedoverflow不為visibledisplay為inline-block或table或flow-root
后續的案例中，但凡遇到需要觸發BFC的，都可以按照這四個條件來使用
三、BFC的相關案例
官方的解釋非常的難以理解，那么我們就用幾個例子來詳細了解BFC的使用
（1）清除浮動
首先來看一個例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>浮動</title>
<style>
.parent{
width: 350px;
background-color: red;
}
.child{
float: left;
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
background-color: lightblue;
}
</style>
</head>
<body>
<div class="parent">
<div class="child1 child">1</div>
<div class="child2 child">2</div>
<div class="child3 child">3</div>
<div class="child4 child">4</div>
</div>
</body>
</html>
該html檔案在瀏覽器中的樣式如下圖所示
很明顯，這是一個子元素浮動無法撐開父元素的例子
產生這種情況的原因很簡單，有以下兩點：
- 父元素沒有設定
height - 子元素設定了
float浮動，脫離了檔案流
因子元素脫離了檔案流，父元素無法統計到子元素的大小，因此子元素無法將父元素撐開，所以我們就要將浮動清除
那么我們平時是如何清除浮動的呢？最常見的可能就是給父元素添加樣式 overflow: hidden 了，其實這種方法就觸發了BFC，在父元素內部形成了一個獨立的環境，按照BFC的布局規則，該容器內的元素都會被統計到，因此浮動就被清除了
清除浮動后的效果如下圖所示
其實通過我們上述說到的觸發BFC的條件都可以實作上述效果，這里就不做過多的展示了
既然講到了清除浮動，我們就來看一下除了上述說到的方法，還會用到什么辦法呢？
- 在最后一個子元素后面添加一個空元素，并給予樣式
clear: both - 給父元素設定一定的高度
（2）margin-top塌陷
另一個例子就是margin-top塌陷，如圖
當前子元素在父元素框內，并且上面緊貼父元素上邊緣，此時我們想讓子元素的上邊緣與父元素的上邊緣拉開一段距離，實作如下圖所示的效果
因此我們第一個想到的就是給子元素添加 margin-top，可結果卻不如人意，效果如下圖所示
實際效果就是，我們給子元素添加了 margin-top，但卻是父元素整體與上一個元素拉開了距離，這就是我們常見的 margin-top塌陷 的問題
很明顯，對子元素進行布局時影響到了其它元素的布局，因此我們可以通過給父元素添加一定的樣式來觸發BFC，使其內部形成一個獨立的環境，這樣就不會影響到其它元素的布局了
這里再做一個補充，針對 margin-top塌陷，我們還可以對父元素設定一個大小不為0的邊框 border，這樣也能解決問題
（3）垂直方向的margin重疊
先來看一段代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>margin重疊</title>
<style>
.parent{
width: 200px;
height: 500px;
background-color: red;
}
.child{
width: 100px;
height: 100px;
margin: 0 auto;
line-height: 100px;
text-align: center;
}
.child1{
margin-bottom: 20px;
background-color: lightblue;
}
.child2{
margin-top: 50px;
margin-bottom: 70px;
background-color: lightcoral;
}
.child3{
margin-top: 50px;
background-color: lightgreen;
}
</style>
</head>
<body>
<div class="parent">
<div class="child child1">1</div>
<div class="child child2">2</div>
<div class="child child3">3</div>
</div>
</body>
</html>
效果如圖所示
根據代碼，按道理來說子元素1與子元素2之間應該相隔 20 + 50 = 70px，但實際卻只有 50px ；同理，子元素2與子元素3之間應該相隔 70 + 50 = 120px，但實際卻只有 70px
這是因為在垂直方向上，相鄰兩個元素若都設定了 margin 值，則按照較大的那個值來布局，這就是典型的垂直方向上的margin重疊問題
若此時為了避免margin重疊，我們可以給每一個子元素的外部添加一個父元素，并對父元素設定樣式來觸發BFC，那么就不會有上述的問題了
具體的代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>margin重疊</title>
<style>
.parent{
width: 200px;
height: 500px;
background-color: red;
}
.child{
width: 100px;
height: 100px;
margin: 0 auto;
line-height: 100px;
text-align: center;
}
.child1{
margin-bottom: 20px;
background-color: lightblue;
}
.child2{
margin-top: 50px;
margin-bottom: 70px;
background-color: lightcoral;
}
.child3{
margin-top: 50px;
background-color: lightgreen;
}
.third{
/*除了overflow: hidden，還可以寫：
1. float: left
2. float: right
3. position: absolute
4. ……
*/
overflow: hidden;
}
</style>
</head>
<body>
<div class="parent">
<div class="third">
<div class="child child1">1</div>
</div>
<div class="third">
<div class="child child2">2</div>
</div>
<div class="third">
<div class="child child3">3</div>
</div>
</div>
</body>
</html>
效果如下圖所示：
補充： 該案例中，我們通過給每個子元素套上了個父元素，并且都觸發了BFC，從而實作了避免 margin 重疊，即我們創建了多個BFC才實作這樣的效果，但是如果在一個BFC環境中，仍有多個子元素，那么這些子元素垂直方向的 margin 仍會出現重疊
（4）自適應布局
相比大家都有做過文字繞圖這樣的效果，其實作原理就非常的簡單，只需一個 float 就可實作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文字繞圖</title>
<style>
.parent{
border: 1px solid #000;
width: 200px;
height: 250px;
}
.img{
width: 100px;
height: 100px;
float: left;
}
.text{
background-color: lightgreen;
}
</style>
</head>
<body>
<div class="parent">
<img src="../../前端印象logo.jpg" alt="" class="img">
<div class="text">微信公眾號：前端印象，每天分享前端技術、前端面經，還有更多福利可以領取，歡迎關注，私信我加群，群里有多位大佬，可以互相交流前端技術</div>
</div>
</body>
</html>
效果如下圖所示
按道理來說，浮動的元素脫離了正常的檔案流，應該會覆寫住別的元素的內容，但為什么這里實作了文字繞圖的效果呢？
其實css最初設計浮動就是為了實作文字繞圖的效果，雖然浮動會覆寫別的元素，但不會覆寫住文字
此時我們為了不讓浮動的元素覆寫住別的元素，我們可以觸發別的元素的BFC環境，因此可以給文本元素添加 overflow: hidden 樣式，效果如下圖所示
看到這里，不禁想起這幾年非常流行的頁面布局，那就是兩欄布局，如下圖所示
一般像這樣的布局，都是左側寬度固定了，右側的寬度是自適應的
因此我們就可以通過剛才避免文字繞圖的方式來實作這種布局
代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>自適應布局</title>
<style>
.parent{
height: 100vh;
}
.left{
width: 200px;
height: 100%;
background-color: lightgreen;
text-align: center;
float: left;
}
.right{
height: 100%;
overflow: hidden; /* 觸發BFC，不被浮動元素所覆寫 */
text-align: center;
background-color: lightskyblue;
}
</style>
</head>
<body>
<div class="parent">
<div class="left">固定寬度</div>
<div class="right">自適應寬度</div>
</div>
</body>
</html>
效果如圖所示
四、結束語
官方對于BFC的講解，我感覺是有點難以理解，因此我在本文中也沒有將BFC環境中的布局規則列舉出來，但其實BFC的布局規則大致可以理解為與正常的布局規則一樣，只不過有些特殊的規則我在案例中也特地強調出來了，希望大家可以把每個案例好好看一看，這樣應該能對BFC有個大致的了解了
你的【贊】 、【收藏】都是我創作的動力，謝謝大家的支持
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/209357.html
標籤：其他
上一篇：JSP標準動作簡介
下一篇：jsp+java servlet實作簡單用戶登錄和注冊頁面（連接資料庫，登錄頁面包含驗證碼，兩周內免登陸等功能）