溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了“CSS BFC是什么及有什么作用”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“CSS BFC是什么及有什么作用”吧！
在了解BFC(Block Formatting Context)之前，我們先來看看FC(Formatting Context)是什么：
這段話來自W3C官網，我們可以得到如下信息：
所有的盒子都屬于一個FC
塊級元素的布局屬于一個BFC。例如div/p/h2等 -> BFC布局中
行內級元素的布局屬于一個IFC。例如img/a/span/i -> IFC布局中
簡單理解：塊級元素所在的布局和上下文就是BFC，行內級元素所在的布局和上下文就是IFC
首先我們先看一下W3C的官方解釋：
MDN上整理出的下了情況會創建BFC：
根元素(html)
浮動元素(元素的float值不是none)
絕對定位元素(元素的position為absolute或者fixed)
行內塊元素(元素的display為inline-block)
表格單元格(元素的display為table-cell，HTML表格單元格默認為該值，表格標題(元素的display為table-caption，HTML表格標題默認為該值)row，tbody，thead，tfoot的默認屬性)或inline-table)
overflow計算值(Computed)不為visible的塊元素
彈性元素(display為flex或inline-flex元素的直接子元素)
網格元素(display為grid或inline-grid元素的直接子元素)
display值為flow-root的元素
由此可見
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <div></div> <div></div> </body> </html>
這段代碼中的box1和box2都是在html根元素的BFC中布局的
首先先看一下官方文檔對BFC作用的描述:
我們可以得到的信息：
在一個BFC中，盒子會從包含塊的頂部開始，在垂直方向上會一個挨著一個擺放，可能很多人都對這一點習以為常，但這點是BFC幫助我們實現的。當我們對某個盒子設置一個margin-top的時候，BFC會幫助我們解析，然后會在盒子布局時候給一個上邊距
在一個BFC中，每個元素的左邊緣都會緊貼著包含塊的左邊緣
在同一個BFC中，在垂直方向上，相鄰兩個盒子的margin會重疊，值取兩者中較大的(可以利用此特性解決margin重疊問題)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.box1 {
height: 200px;
width: 400px;
background-color: orange;
margin-bottom: 30px;
}
.box2 {
height: 150px;
background-color: purple;
margin-top: 50px;
}
</style>
</head>
<body>
<div></div>
<div></div>
</body>
</html>此時box1和box1此時同處于html的BFC中，并且box1和box2在垂直方向上相鄰，所以會出現margin重疊，取兩者其中較大的值50px
如何解決呢？可能很多人會想到直接給box1添加一個BFC，所以直接給box1添加個overflow:hidden屬性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.box1 {
height: 200px;
width: 400px;
background-color: orange;
margin-bottom: 30px;
overflow: hidden;
}
.box2 {
height: 150px;
background-color: purple;
margin-top: 50px;
}
</style>
</head>
<body>
<div></div>
<div></div>
</body>
</html>結果呢？
發現并不起作用。可能此時很多人就懵了，box1此時不是明明已經形成了BFC了嘛，為什么還會發生重疊？讓我來給你解釋一下，首先此時box1確實是已經形成了BFC（可以理解成box1內部形成了BFC），但是對于box1這個元素的本身，還是和box2同屬于html的BFC中，所以還是會發生margin重疊
所以我們要給box1套一層，然后給box1外層的盒子設置BFC
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
/* 給box1外層增加一個container盒子，并設置BFC */
.container {
overflow: hidden;
}
.box1 {
height: 200px;
width: 400px;
background-color: orange;
margin-bottom: 30px;
}
.box2 {
height: 150px;
background-color: purple;
margin-top: 50px;
}
</style>
</head>
<body>
<div>
<div></div>
</div>
<div></div>
</body>
</html>此時box1屬于container的BFC，而box2屬于html的BFC，不屬于同一個BFC，所以就能解決margin重疊問題
當我們給container里面的四個item設置浮動的時候，很明顯，這幾個元素都會脫離文檔流，此時container不會有高度
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.container {
background-color: orange;
}
.item {
width: 400px;
height: 200px;
box-sizing: border-box;
border: 1px solid #000;
float: left;
background-color: #f00;
}
</style>
</head>
<body>
<div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
很多網上博主說，通過給container設置一個BFC，內部的浮動元素就會向其匯報高度，然后container就能解決浮動高度塌陷問題，這個做法是正確的，但是這個說法其實是錯誤，并不是因為其內部的浮動元素向其匯報了高度
事實上，想通過BFC解決高度塌陷問題需要滿足兩個條件：
浮動元素的父元素觸發BFC，形成獨立的塊級格式化上下文(BFC)
浮動元素的父元素高度為auto
首先我們先看一段W3C的描述
大致意思為BFC的高度是auto情況下，高度是這樣計算：
如果只有inline-level，是行高的頂部和底部的距離
如果有block-level，是有最底層的塊上邊緣和最底層塊盒子的下邊緣之間的距離（有margin也會計算在內）
如果有絕對定位元素，將被忽略（所有我們無法通過BFC解決絕對定位的高度塌陷問題）
如果有浮動元素，那么會增加高度以包括這些浮動元素的下邊緣（這才是BFC能解決浮動元素塌陷問題的原因，并不是因為浮動元素向上匯報了高度）
所以我們直接給container通過添加overflow屬性設置BFC，則由于上述第四條4特性，container會增加高度來包括內部四個item浮動元素下邊緣，所以解決了浮動塌陷問題
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.container {
background-color: orange;
/* 通過overflow形成BFC */
overflow: hidden;
}
.item {
width: 400px;
height: 200px;
box-sizing: border-box;
border: 1px solid #000;
float: left;
background-color: #f00;
}
</style>
</head>
<body>
<div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
感謝各位的閱讀，以上就是“CSS BFC是什么及有什么作用”的內容了，經過本文的學習后，相信大家對CSS BFC是什么及有什么作用這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
