什么是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
网友评论