一、概念 BFC：Block formatting context 块级格式化上下文；
形成独立的渲染区域
内部元素的渲染不会影响外界
形成 BFC 的常见条件：
- 浮动元素：float 不是 none；
- 绝对定位元素position 是 absolute 或者fixed；
- 块级元素 overflow 不是 visible；
- flex元素；
- inline-block元素
清除浮动等。
二、例子
文章图片
文章图片
是因为图片img左浮动了，脱离了文档流。
文章图片
所以，container的高度是由P标签的高度决定的，如果我们希望container高度由这个img标签来决定。
我们可以这么做，我们在CSS文件中定义一个.bfc的类，找到一个行程BFC的条件，比如：overflow:hidden;
文章图片
文章图片
为啥这么做高度就正常了呢。因为container这个div加了一个overflow: hidden;
这就是说：
container这个div会 “形成独立的渲染区域，内部元素的渲染不会影响外界”，img就是内部元素啊，保证img渲染不会影响到外部。按照img高度渲染整个container的高度。不然img就超过container的高度了，不符合BFC的逻辑。
虽然img标签，float浮动了，但container依旧会把这个浮动的元素算进去，保证它不出格，得到最终的高度。
但是，也有问题，虽然看着没问题，实际上是有问题的，p占据了img的位置，这不是我们想要的结果，我们不想让P占据img的位置。
文章图片
怎么解决呢？我们再次使用BFC的功能，将P标签也加上.bfc的类。那么p也形成了BFC：p形成独立的渲染区域，p不能侵占了img，只能在自己的区域渲染。
文章图片
复习知识
复习一下常见的定位方案
第一：普通流（默认）
文章图片
第二：浮动
文章图片
第三、绝对定位
文章图片
而BFC属于普通流。
BFC可以看做是元素的一种属性，当元素有了BFC属性，元素就可以看做是隔离了的独立容器。
容器里面的元素不会在布局上影响到外面的元素。
文章图片
如何触发BFC？
文章图片
BFC的特性和应用 1、BFC可以避免外边距重叠
文章图片
这是规范，不是bug：
块的上外边距margin-top和下外边距 margin-bottom会合并为单个边距，其大小为单个边距的最大值，这就是外边距重叠现象。
如何解决呢 ？
只要将两个div放在不同的BFC中。那么两个BFC的内容不会互相干扰。
文章图片
2、BFC第二个作用，清除浮动。
两个div，父子关系，子元素设置float为left。
文章图片
但是，事与愿违。
文章图片
子div是浮动的，脱离了文档流。
我们可以通过overflow属性触发父容器的BFC，那么父容器会包裹这子元素，从而达到了清除浮动的目的。
文章图片
【2022面试|前端基础（BFC）】
三、阻挡元素被浮动元素覆盖
阻止元素被浮动元素覆盖
文章图片
如果想要避免被覆盖，可以触发正常元素的BFC属性。
所以，在下面正常元素加了overflow属性，这样两个属性就不会互相干扰。
文章图片
推荐阅读
- 2022面试|前端基础（call、apply、bind的基本概念）
- 前端|如何将项目上传到Gitee上
- Django全栈开发|【Python+Django】一个博客网站的设计和代码实现
- 青龙面板-来自保姆的喂饭|(九)青龙Tools 正式版/前端网页提交+后台管理/适用于所有场景/开饭开饭开饭 【2022年6月15日】【更新】
- Android基础入门|【毕业季_进击的技术er】送别过去两年迷茫的自己。重整旗鼓，大三我来啦
- JavaScript|Echarts5.* 关系图谱(relation graph)添加节点拖拽、点击节点高亮效果
- 微信小程序（黑马）|【微信小程序】视图容器和基本内容组件
- javascript|基于HTML5+JavaScript实现的网页录屏器设计
- 毕业设计|SpringBoot+Vue项目旅游信息推荐系统【源码开源】