BFC是什么
BFC全称是Block Formatting Context，即块格式化上下文。块格式上下文是页面CSS 视觉渲染的一部分，用于决定块盒子的布局及浮动相互影响范围的一个区域。
三种定位
- 常规流
- 对于静态定位(static positioning)，position: static，盒的位置是常规流布局里的位置；
- 对于相对定位(relative positioning)，position: relative，盒偏移位置由这些属性定义top，bottom，leftandright。即使有偏移，仍然保留原有的位置，其它常规流不能占用这个位置。
- 浮动(Floats)
- 绝对定位(Absolute positioning)
BFC创建的7种方法
- 根元素或其它包含它的元素；
- 浮动 (元素的float不为none)；
- 绝对定位元素 (元素的position为absolute或fixed)；
- 行内块inline-blocks(元素的 display: inline-block)；
- 表格单元格(元素的display: table-cell，HTML表格单元格默认属性)；
- overflow的值不为visible的元素；
- 弹性盒 flex boxes (元素的display: flex或inline-flex)；
最常见的就是overflow:hidden、float:left/right、position:absolute。也就是说，每次看到这些属性的时候，就代表了该元素以及创建了一个BFC了。
BFC的范围
一个BFC包含创建该上下文元素的所有子元素，但不包括创建了新BFC的子元素的内部元素。
<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创建了一个块格式上下文，这个上下文包括了#div_2、#div_3、#div_4、#div_5。即#div_2中的子元素也属于#div_1所创建的BFC。但由于#div_5创建了新的BFC，所以#div_6和#div_7就被排除在外层的BFC之外。从另一方角度说明，一个元素不能同时存在于两个BFC中。
BFC的一个最重要的效果是，让处于BFC内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响。这是利用BFC清除浮动所利用的特性
BFC的效果
- BFC内部可以看作有一个常规流
- BFC内部margin collapse
- 元素的margin box的左边与容器的content box左边想接触
- BFC是独立的容器，里面的子元素不会影响外面的元素，外面的元素也不会影响里面的元素
- 计算BFC高度时，考虑BFC包含的所有元素，连浮动的子元素也包括，但不包括浮动的子元素中的子元素
- 移动盒区域不添加到BFC上
具体实例：https://juejin.im/post/59b73d5bf265da064618731d#heading-12
BFC的应用
- 兄弟元素之间划清界限：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合并现象
*{
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的问题，那么就要通过触发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>
在这里插入图片描述
- 子盒子设置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
https://www.jianshu.com/p/33abfdd57fb8
https://www.jianshu.com/p/d94c6b679739
https://blog.csdn.net/return_js/article/details/81266131
https://blog.csdn.net/jiaojsun/article/details/76408215
