腾讯一面：谈谈你对BFC的理解

桃扇骨 2024-04-17 10:27 65阅读 0赞

![4f23ff9a8e9a4a06b9c3a5d11c245cae.png][]

**前言**

> 最近博主在**腾讯面试**中遇到这样一个面试题，这个问题也是前端面试的高频问题，作为一名前端开发工程师，css是我们的必备技能，熟悉BFC是我们写好css的关键，博主在这给大家细细道来。

--------------------

> ? 作者简介：[程序员小豪][Link 1]，全栈工程师，热爱编程，曾就职于**蔚来、腾讯**，现就职于某互联网大厂，技术栈：Vue、React、Python、Java  
> ? 本文收录于小豪的[前端][Link 2]系列专栏，后续还会更新**前端入门以及前端面试**的一些相关文章，手把手带你从零学习前端到面试找工作，并如果有想进入前端领域工作的同学，这个[前端][Link 2]专栏会对你有所帮助，欢迎关注起来呀  
> ? 本人也会持续的去关注`AIGC以及人工智能领域`的一些动向并总结到博客中，大家感兴趣的可以关注一下我的[人工智能][Link 3]专栏  
> ? [云原生][Link 4]的入门学习系列，大家有兴趣的可以看一看

#### 目录 ####

*  一、是什么
 *  二、触发条件
 *  三、应用场景
 *   *  防止margin重叠（塌陷）
     *  清除内部浮动
     *  自适应多栏布局
     *  小结
 *  总结

## 一、是什么 ##

我们在页面布局的时候，经常出现以下情况：

*  这个元素高度怎么没了？
 *  这两栏布局怎么没法自适应？
 *  这两个元素的间距怎么有点奇怪的样子？
 *  …

原因是元素之间相互的影响，导致了意料之外的情况，这里就涉及到`BFC`概念

`BFC`（Block Formatting Context），即块级格式化上下文，它是页面中的一块渲染区域，并且有一套属于自己的渲染规则：

*  内部的盒子会在垂直方向上一个接一个的放置
 *  对于同一个BFC的俩个相邻的盒子的margin会发生重叠，与方向无关。
 *  每个元素的左外边距与包含块的左边界相接触（从左到右），即使浮动元素也是如此
 *  BFC的区域不会与float的元素区域重叠
 *  计算BFC的高度时，浮动子元素也参与计算
 *  BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然

`BFC`目的是形成一个相对于外界完全独立的空间，让内部的子元素不会影响到外部的元素

## 二、触发条件 ##

触发`BFC`的条件包含不限于：

*  根元素，即HTML元素
 *  浮动元素：float值为left、right
 *  overflow值不为 visible，为 auto、scroll、hidden
 *  display的值为inline-block、inltable-cell、table-caption、table、inline-table、flex、inline-flex、grid、inline-grid
 *  position的值为absolute或fixed

## 三、应用场景 ##

利用`BFC`的特性，我们将`BFC`应用在以下场景：

### 防止margin重叠（塌陷） ###

页面显示如下：

![8ab29bbe3211487d92946707e1ec1e79.png][] 两个\`p\`元素之间的距离为\`100px\`，发生了\`margin\`重叠（塌陷），以最大的为准，如果第一个P的\`margin\`为80的话，两个P之间的距离还是100，以最大的为准。

前面讲到，同一个`BFC`的俩个相邻的盒子的`margin`会发生重叠

可以在`p`外面包裹一层容器，并触发这个容器生成一个`BFC`，那么两个`p`就不属于同一个`BFC`，则不会出现`margin`重叠

这时候，边距则不会重叠：

![17b086cd244042bb962117a31195c766.png][]

### 清除内部浮动 ###

页面显示如下：

![2ede7efeda834180a12a7d56710abfb3.png][] 而\`BFC\`在计算高度时，浮动元素也会参与，所以我们可以触发\`.par\`元素生成\`BFC\`，则内部浮动元素计算高度时候也会计算

.par {
        
        overflow: hidden;
    }而BFC在计算高度时，浮动元素也会参与，所以我们可以触发.par元素生成BFC，则内部浮动元素计算高度时候也会计算
    
    .par {
        
        overflow: hidden;
    }

实现效果如下：

![59cfd38149714e6bb5538181ed7e3175.png][]

### 自适应多栏布局 ###

这里举个两栏的布局

效果图如下：

![e4d7433d866f4537b1896f7425dbcd82.png][]

前面讲到，每个元素的左外边距与包含块的左边界相接触

因此，虽然`.aslide`为浮动元素，但是`main`的左边依然会与包含块的左边相接触

而`BFC`的区域不会与浮动盒子重叠

所以我们可以通过触发`main`生成`BFC`，以此适应两栏布局

.main {
        
        overflow: hidden;
    }

这时候，新的`BFC`不会与浮动的`.aside`元素重叠。因此会根据包含块的宽度，和`.aside`的宽度，自动变窄

效果如下：

![3b1b2877d3a34a9f9aa0de4db52ec87a.png][]

### 小结 ###

可以看到上面几个案例，都体现了BFC实际就是页面一个独立的容器，里面的子元素不影响外面的元素

## 总结 ##

各位看官老爷们好，小豪已经建立了技术交流群，如果你很感兴趣，可以私信我加入我的社群。

?社群中不定时会有很多活动，例如学习资料分享、大厂面经分享、技术讨论、行业大佬创业杂谈等等。

?本人目前是在互联网大厂正式工作，也有过多个大厂的工作经历，加入社群也会有简历修改辅导，模拟面试，手把手项目实战教学，大厂工作内推机会以及大厂面试题解析分享等福利。

?社群方向很多，相关领域有Web全栈（前后端）、人工智能、AIGC、自媒体变现、前沿科技文章分享、论文精读等等。

?不管你是多新手的小白，都欢迎你加入社群中讨论、聊天、分享，加速助力你成为下一个技术大佬！也随时欢迎您跟我沟通，一起交流，一起成长。变现、进步、技术、资料、项目、你想要的这里都会有

?网络的风口只会越来越大，风浪越大，鱼越贵！欢迎您加入社群~一个人可以或许可以走的很快，但一群人将走的更远！

?想都是问题，做都是答案！行动起来吧！欢迎评论区or后台与我沟通交流，也欢迎您扫描下方二维码直接加入到我的交流社群！(微信：adcoderhao)

[4f23ff9a8e9a4a06b9c3a5d11c245cae.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/14/3960123d5d7d4e2bade4ecbcdaeee3c7.png
[Link 1]: https://blog.csdn.net/A_D_H_E_R_E
[Link 2]: https://blog.csdn.net/a_d_h_e_r_e/category_12357719.html
[Link 3]: https://blog.csdn.net/a_d_h_e_r_e/category_12402347.html
[Link 4]: https://blog.csdn.net/a_d_h_e_r_e/category_12369482.html
[8ab29bbe3211487d92946707e1ec1e79.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/14/ba739bfb85724a34b61a844cec09cc6b.png
[17b086cd244042bb962117a31195c766.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/14/f987d16b7aa04448bd10de48db19926c.png
[2ede7efeda834180a12a7d56710abfb3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/14/5f4d3bdc1fdf48cab33c09894bd0aef1.png
[59cfd38149714e6bb5538181ed7e3175.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/14/cea30200bf8744e59e3bd563e75befff.png
[e4d7433d866f4537b1896f7425dbcd82.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/14/87ec52e30cd8454e900a9b88277a75d1.png
[3b1b2877d3a34a9f9aa0de4db52ec87a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/14/5e7a4a9e469c4071bf2b49f1c8628f2a.png