22 BFC

一、BFC是什么？

1.`它是 Block Formatting Context (块级格式化上下文) 的简称。

2. BFC 是指一个独立的块级渲染区域，只有Block-level Box参与，该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关。
BFC就是一种布局方式，可以理解为一个作用范围，即在一个BFC里的布局与其之外的布局不相关或者说不相互影响。

3. 举一个形象的例子：
可以把一个页面想象成大的集装箱，这个集装箱里装的货物就是 html元素。在现实生活中为了避免不同人的货物相互混淆，都是把货物打好包装再装入集装箱，这样的话无论你包装里面的货物怎么摆放，都不会影响到其他人的货物。那么这个包装就可以被想象成 Block Formatting Context。

４. 为什么要用BFC？
使用一定的CSS声明可以生成BFC，浏览器对生成的BFC有一系列的渲染规则，利用这些渲染规则我们可以达到一定的布局效果，为了达到特定的布局效果我们让元素生成BFC。

二 生成BFC的方式

当一个HTML元素满足下面条件的任何一点，都可以产生 Block Formatting Context根元素

float的值不为none；

overflow的值不为visible(可以为hidden,scroll,auto)；

display的值为inline-block,table-cell,table-caption,flex,inline-flex中的任何一个；

position的值为absolute,fixed(不为static,relative中的任何一个)；

display：table也认为可以生成BFC，其实这里的主要原因在于table会默认生成一个匿名的table-cell，正是这个匿名的table-cell生成了BFC。

常用的用来触发BFC的CSS样式：
overflow: scroll,overflow: hidden,display: flex, float: left,display: table

其中可能产生的一些问题

display:table —— 可能会产生一些问题

overflow:scroll —— 可能会显示不必要的滚动条

overflow:hidden —— 将会剪切掉溢出的元素

float:left —— 将会把元素置于容器的左边，其他元素环绕着它

三、 BFC作用

• 1.自适应两栏布局

image.png image.png

效果图！

image.png

• 2.解决兄弟嵌套中或者父子嵌套中垂直方向上margin合并的问题
• 3.解决由于子元素浮动导致父级高度坍塌的情况！