(2019)[前端]面試題[1]：CSS BFC是什麼【BFC詳解】
- 2019 年 11 月 13 日
- 筆記
Hello，歡迎來到我的博客，每天一道面試題，我們共同進步。
問題
CSS BFC是什麼？
解答
定義
BFC（Block Formatting Context）格式化上下文，是盒模型的一種渲染布局，簡言之可以理解為 一個獨立的容器，不受外部影響，不影響外部。
形成條件
- 固定(fixed)定位和絕對(absolute)定位
- float:both,left,right(除了none)
- overflow:hidden,auto,scroll(除了visible)
- display:inline-block,table-cell,table-caption
特點
- 內部的盒子會以垂直分佈
- 垂直方向的距離由margin決定
- 和float元素區域分割開，不會重疊
- 計算BFC高度時，浮動元素高度也計算在內
- 獨立的渲染容器，不受外部影響，不影響外部
作用
- 清除浮動
- 消除margin重疊
- 布局
實例
A.BFC的盒子對齊
可以看出： 1、元素垂直方向布局 2、浮動元素也是垂直方向，且沒超過他的前兩個兄弟元素 3、雖沒超過前兩個元素，但是下面的盒子頂上去了 4、全部左對齊
HTML代碼
<div class="container"> <div class="box-1"></div> <div class="box-2"></div> <div class="box-3"></div> <div class="box-4"></div> </div>
CSS代碼
.container { position: absolute; /*為了創建BFC環境*/ background: #ccc; } div { height: 30px; } .box-1 { width: 300px; background-color: red; } .box-2 { width: 250px; background-color: green; } .box-3 { width: 200px; background-color: blue; float: left; } .box-4 { width: 150px; height: 40px; background-color: yellow; }
B.外邊距摺疊
兩個子盒子的垂直距離為20px而不是30px，因為傳統的文檔流垂直外邊距會摺疊，間距以較大的為準。【這是規定，如下圖】
<div class="container"> <div class="box1"></div> <div class="box2"></div> </div>
.container { overflow: hidden; width: 100px; height: 100px; background-color: #ccc; } .box1 { height: 30px; margin: 10px 0; background-color: green; } .box2 { height: 30px; margin: 20px 0; background-color: green; }
那麼有沒有方法讓垂直外邊距不摺疊呢？答案是：有。
bfc就是頁面上的一個獨立容器，容器裏面的子元素不會影響外面元素，同樣外面的元素不會影響到BFC內的元素。所以就讓box1或box2再處於另一個BFC中就行了。
給box1加一個父元素wrap，是wrap滿足BFC條件。
<div class="container"> <div class="wrapper"> <div class="box1"></div> </div> <div class="box2"></div> </div>
<style> .container { overflow: hidden; width: 100px; height: 100px; background-color: #ccc; } .wrapper { overflow: hidden; /*BFC*/ } .box1 { height: 30px; margin: 10px 0; background-color: green; } .box2 { height: 30px; margin: 20px 0; background-color: green; } </style>
C.不被浮動元素覆蓋
不被浮動元素覆蓋有很多用處。 且看下面
常見的兩欄布局
左邊固定寬度，右邊不設寬，因此右邊的寬度自適應，隨瀏覽器窗口大小的變化而變化。
<div class="column"></div> <div class="column"></div>
.column:nth-of-type(1) { float: left; width: 200px; height: 300px; margin-right: 10px; background-color: red; } .column:nth-of-type(2) { overflow: hidden; /*創建bfc */ height: 300px; background-color: greenyellow; }
還有三欄布局
左右兩邊固定寬度，中間不設寬，因此中間的寬度自適應，隨瀏覽器的大小變化而變化。
<div class="contain"> <div class="column"></div> <div class="column"></div> <div class="column"></div> </div>
.column:nth-of-type(1), .column:nth-of-type(2) { float: left; width: 100px; height: 300px; background-color: green; } .column:nth-of-type(2) { float: right; } .column:nth-of-type(3) { overflow: hidden; /*創建bfc*/ height: 300px; background-color: red; }
防止字體環繞
浮動的盒子會遮蓋下面的盒子，但是下面盒子裏面的文字不會被遮蓋，並且會環繞浮動盒子
.left { float: left; width: 100px; height: 100px; background-color: yellowgreen; } p { background-color: blueviolet; overflow: hidden; /*顯示/隱藏此條決定是否環繞（創建了BFC）*/ }
<div class="left">這是浮動盒子</div> <p>浮動的盒子會遮蓋下面的盒子，但是下面盒子裏面的文字不會被遮蓋，並且會環繞浮動盒子 浮動的盒子會遮蓋下面的盒子，但是下面盒子裏面的文字不會被遮蓋，並且會環繞浮動盒子 浮動的盒子會遮蓋下面的盒子，但是下面盒子裏面的文字不會被遮蓋，並且會環繞浮動盒子 浮動的盒子會遮蓋下面的盒子，但是下面盒子裏面的文字不會被遮蓋，並且會環繞浮動盒子 </p>
D.利用BFC清除浮動
<div class="container"> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> </div>
.container { width: 300px; height: 300px; background-color: #eee; } div { width: 100px; height: 100px; } .box1 { background-color: lightcoral; } .box2 { float: left; background-color: lightgreen; } .box3 { overflow: hidden; /*創建BFC，清除左邊（box2的浮動）*/ background-color: lightsteelblue; }
總結
看似真的是很小的一個知識點，要理解，要寫出這篇文章來，真的要花費不少時間。
加油！！
