面試官：說一說BFC吧
我：??那是啥…💥
BFC是什么
BFC(Block formatting context)直譯為"塊級格式化背景關系"，它是一個獨立的渲染區域，只有Block-level box參與， 它規定了內部的Block-level Box如何布局，并且與這個區域外部毫不相干，
BFC是一個獨立的布局環境，其中的元素布局是不受外界的影響，并且在一個BFC中，塊盒與行盒（行盒由一行中所有的行內元素所組成）都會垂直的沿著其父元素的邊框排列，
觸發條件
一個HTML元素要創建BFC，則滿足下列的任意一個或多個條件即可： 下列方式會創建塊格式化背景關系：
- 根元素()
浮動元素（元素的 float 不是 none）絕對定位元素（元素的 position 為 absolute 或 fixed）行內塊元素（元素的 display 為 inline-block）- 表格單元格（元素的 display為 table-cell，HTML表格單元格默認為該值）
- 表格標題（元素的 display 為 table-caption，HTML表格標題默認為該值）
- 匿名表格單元格元素（元素的 display為 table、table-row、 table-row-group、table-header-group、table-footer-group（分別是HTML table、row、tbody、thead、tfoot的默認屬性）或 inline-table）
overflow 值不為 visible 的塊元素-彈性元素（display為 flex 或 inline-flex元素的直接子元素）- 網格元素（display為 grid 或 inline-grid 元素的直接子元素） 等等，
BFC渲染規則
- BFC垂直方向邊距重疊
- BFC的區域不會與浮動元素的box重疊
- BFC是一個獨立的容器，外面的元素不會影響里面的元素
- 計算BFC高度的時候浮動元素也會參與計算
應用
防止浮動導致父元素高度塌陷（清除浮動）
--css
<style>
.container {
border: 10px solid red;
}
.inner {
background: #08BDEB;
height: 100px;
width: 100px;
}
</style>
--html
<body>
<div class="container">
<div class="inner"></div>
</div>
</body>
接下來將inner元素設為浮動:
.inner {
float: left;
background: #08BDEB;
height: 100px;
width: 100px;
}
會產生這樣的塌陷效果：
但如果我們對父元素設定BFC后, 這樣的問題就解決了
.container {
border: 10px solid red;
overflow: hidden;
}
同時是清除浮動的一種方式，
避免外邊距折疊
兩個塊在同一個BFC內，會造成外邊距折疊，
--css
.container {
background-color: green;
overflow: hidden;
}
.inner {
background-color: lightblue;
margin: 10px 0;
}
</style>
--html
<body>
<div class="container">
<div class="inner">1</div>
<div class="inner">2</div>
<div class="inner">3</div>
</div>
</body>
此時三個元素的上下間隔都是10px, 因為三個元素同屬于一個BFC， 現在我們做如下操作:
--html
<div class="container">
<div class="inner">1</div>
<div class="bfc">
<div class="inner">2</div>
</div>
<div class="inner">3</div>
</div>
--css
.bfc{
overflow: hidden;
}
可以看到和我們的想法已經一樣了，沒有出現重疊，
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/291526.html
標籤：其他