前言

面试常问的CSS问题，不仅仅只答出它是什么，干什么的。最重要的是它在工作中的应用场景，如果能很好的描述出它的应用场景，这在面试官的眼里你是真实掌握了的，潜意识里会给你加分。

简介BFC

BFC（Block Formatting Context），块级格式化内容 可以把BFC理解为形成了一个独立的容器，在容器内的布局不受到外界的影响

通过设置css属性创建BFC，总结常用的4点方式：

1. 设置float的值为left或right
2. 设置position的值为absolute或fixed
3. 设置display的值为inline-block、flex、table-cell、table-caption
4. 设置overflow的值不为visible

应用场景

1. 让浮动元素之间不重叠 如果一个浮动元素后面跟着一个非浮动的元素，那么就会产生一个覆盖的现象，浮动的元素会覆盖在非浮动元素的上面

// html
<div class="box1">元素1</div>
<div class="box2">元素2</div>

// css
.box1{
  width: 50px;
  height: 50px;
  background:wheat;
  float: left; // 浮动
}
.box2{
  width: 200px;
  height: 200px;
  background:turquoise;
}

现象：

此时需要给没有浮动的元素创建一个BFC就行了，比如加一个： display：inline-block，需要设置宽 overflow: hidden，不需要设置宽

.box2加上后效果：

2. 清除元素内部浮动 子级元素浮动时，父元素没设高度会引起内部高度为0的问题

// html
<div class="boxF">
  <div class="boxC">子元素</div>
</div>

// css
.boxF{
  border: 1px solid red;
}
.boxC{
  width: 100px;
  height: 100px;
  background:turquoise;
  float: left;
}

现象：

此时只要把父元素设一个BFC就可以清理子元素的浮动了，最常见的方法就是给父元素设置overflow: hidden样式

.boxF加上后效果：

3. 解决上下相邻两个元素外边距折叠 上下相邻元素设置间隔10px+10px，应该为20px，但是发生了折叠，只有10px

// html
<div class="box1">元素1</div>
<div class="box2">元素2</div>

// css
.box1{
  width: 50px;
  height: 50px;
  background:wheat;
  margin-bottom: 10px;
}
.box2{
  width: 50px;
  height: 50px;
  background:turquoise;
  margin-top: 10px;
}

现象： 此时只需要将其中的一个盒子使用BFC包裹就行

.box1加上display:inline-block 后效果：

注意：这种情况比较特殊，虽然能用BFC的方式解决，但使用BFC的其他一些方式并没有效果，可见BFC也不是万能的，具体情况具体解决，对于这种情况建议单方面给一个元素设置margin即可

总结

多做，多试，实践见真理！ 没有最终的成功，也没有致命的失败，最可贵的是继续前行的勇气

往期精彩文章

🌟从浏览器输入网址到页面渲染中间发生了什么(通俗易懂) 🌟发布订阅/观察者模式-真正对比区别 🌟webpack 手写插件流程 🌟两种方式轻松做react css样式隔离 🌟彻底理解redux的中间件原理 🌟canvas实现刮刮奖效果 🌟前端实现pdf下载 🌟web前端性能优化（全汇总） 🌟一句话概括this指向问题 🌟MutationObserver 实现微任务原理分析 🌟遇到几次的大厂笔试题：装饰数组push方法 🌟V8垃圾回收策略与GC算法 🌟浏览器缓存策略(强缓存和协商缓存) 🌟$nextTick 源码解读与原理分析 🌟手动封装适合react hook使用的状态管理工具