什么是BFC?

1、BFC就是一个封闭的区域（独立的渲染区域）
2、如果一个区域创建了BFC,它就会创建一个封闭的区域
3、盒子创建了BFC后，盒子里面的孩子爱怎么浮动，爱怎么定位，不会影响这个区域以外的盒子（一定不会影响外面的盒子），这就叫做BFC。

img.png
image.png

1、哪些元素具有BFC的条件？

块级元素具有BFC的条件
注意：行内元素不具有BFC条件

img.png

BFC具有具体的布局的特性：

img.png
img.png

2、什么情况下可以让元素产生BFC

img.png

注意：BFC需要具备一定的触发条件，并不是所有块级元素都具备BFC条件，看下图4种就明白了（给父亲添加以下属性就可以了）。

img.png

以上4种，任选其一，就可以创建一个封闭的区域了。

3、BFC元素所具有的特性

img.png

4、BFC的主要用途

用途一：清除内部浮动

img.png

实例代码：

img.png

效果图：

img.png

用途二：解决外边距合并问题

img.png

用途三：制作右侧自适应的盒子问题

img.png

总结

img.png