BFC是什么
BFC全稱是Block Formatting Context，即塊格式化上下文。塊格式上下文是頁面CSS 視覺渲染的一部分，用于決定塊盒子的布局及浮動相互影響范圍的一個區(qū)域。
三種定位
- 常規(guī)流
- 對于靜態(tài)定位(static positioning)，position: static，盒的位置是常規(guī)流布局里的位置；
- 對于相對定位(relative positioning)，position: relative，盒偏移位置由這些屬性定義top，bottom，leftandright。即使有偏移，仍然保留原有的位置，其它常規(guī)流不能占用這個位置。
- 浮動(Floats)
- 絕對定位(Absolute positioning)
BFC創(chuàng)建的7種方法
- 根元素或其它包含它的元素；
- 浮動 (元素的float不為none)；
- 絕對定位元素 (元素的position為absolute或fixed)；
- 行內(nèi)塊inline-blocks(元素的 display: inline-block)；
- 表格單元格(元素的display: table-cell，HTML表格單元格默認(rèn)屬性)；
- overflow的值不為visible的元素；
- 彈性盒 flex boxes (元素的display: flex或inline-flex)；
最常見的就是overflow:hidden、float:left/right、position:absolute。也就是說，每次看到這些屬性的時候，就代表了該元素以及創(chuàng)建了一個BFC了。
BFC的范圍
一個BFC包含創(chuàng)建該上下文元素的所有子元素，但不包括創(chuàng)建了新BFC的子元素的內(nèi)部元素。
<div id='div_1' class='BFC'>
<div id='div_2'>
<div id='div_3'></div>
<div id='div_4'></div>
</div>
<div id='div_5' class='BFC'>
<div id='div_6'></div>
<div id='div_7'></div>
</div>
</div>
這段代碼表示，#div_1創(chuàng)建了一個塊格式上下文，這個上下文包括了#div_2、#div_3、#div_4、#div_5。即#div_2中的子元素也屬于#div_1所創(chuàng)建的BFC。但由于#div_5創(chuàng)建了新的BFC，所以#div_6和#div_7就被排除在外層的BFC之外。從另一方角度說明，一個元素不能同時存在于兩個BFC中。
BFC的一個最重要的效果是，讓處于BFC內(nèi)部的元素與外部的元素相互隔離，使內(nèi)外元素的定位不會相互影響。這是利用BFC清除浮動所利用的特性
BFC的效果
- BFC內(nèi)部可以看作有一個常規(guī)流
- BFC內(nèi)部margin collapse
- 元素的margin box的左邊與容器的content box左邊想接觸
- BFC是獨(dú)立的容器，里面的子元素不會影響外面的元素，外面的元素也不會影響里面的元素
- 計算BFC高度時，考慮BFC包含的所有元素，連浮動的子元素也包括，但不包括浮動的子元素中的子元素
- 移動盒區(qū)域不添加到BFC上
具體實(shí)例：https://juejin.im/post/59b73d5bf265da064618731d#heading-12
BFC的應(yīng)用
- 兄弟元素之間劃清界限：overflow:auto 或者 display：flow-root(兼容性差);
*{
padding: 0;
margin: 0;
}
.slide-bar{
width: 100px;
min-height: 300px;
border:5px solid red;
float:left;
}
.main{
border:10px solid green;
min-height: 300px;
overflow: auto;
}
<div class="slide-bar">
</div>
<div class="main">
</div>
image.png
- 清除浮動
*{
padding: 0;
margin: 0;
}
.father{
min-height: 10px;
border:5px solid red;
}
.son{
background-color:green;
width: 300px;
height: 100px;
float: left;}
.clearfix::after{
content: '';
display: block;
clear: both;
}
<div class="father clearfix">
<div class="son">
</div>
</div>
image.png
- 豎直方向上margin合并現(xiàn)象
*{
padding: 0;
margin: 0;
}
.demo1{width: 200px;height: 200px;background-color: red;margin-bottom: 20px;}
.demo2{width: 200px;height: 200px;background-color: black;margin-top: 30px;}
<div class="demo1"></div>
<div class="demo2"></div>
在這里插入圖片描述
瀏覽器解析的時候會使外邊距疊加在一起，這時候就是遇到了BFC的問題，那么就要通過觸發(fā)BFC來解決這個問題。
*{
padding: 0;
margin: 0;
}
.demo1{width: 200px;height: 200px;background-color: red;margin-bottom: 20px;}
.demo2{width: 200px;height: 200px;background-color: black;margin-top: 30px;}
.box{position :absolute;}
<div class="demo1"></div>
<div class="box">
<div class="demo2"></div>
在這里插入圖片描述
- 高度塌陷
<div style="border: 1px solid #000;">
<div style="width: 100px;height: 100px;background: #eee;float: left;"></div>
</div>
在這里插入圖片描述
解決:給父盒子加上BFC
<div style="border: 1px solid #000;overflow: hidden">
<div style="width: 100px;height: 100px;background: #eee;float: left;"></div>
</div>
在這里插入圖片描述
- 子盒子設(shè)置margin，父盒子掉落
html
<div class="box">
<div class="demo"></div>
</div>
css
.box{width: 300px;height: 300px;background-color: black;}
.demo{width: 100px;height: 100px;background-color: red;margin: 20px;}
在這里插入圖片描述
解決：
html
<div class="box">
<div class="demo"></div>
</div>
css
.box{width: 300px;height: 300px;background-color: black;overflow: hidden;}
.demo{width: 100px;height: 100px;background-color: red;margin: 20px;}
參考鏈接：
https://juejin.im/post/59b73d5bf265da064618731d#heading-12
http://m.itdecent.cn/p/33abfdd57fb8
http://m.itdecent.cn/p/d94c6b679739
https://blog.csdn.net/return_js/article/details/81266131
https://blog.csdn.net/jiaojsun/article/details/76408215
