BFC探秘

今天面试被问到了BFC，听到这个缩略词我是懵比的，啥东西？还是太年轻太简单啊。于是面试结束之后搜了几篇博客看了下，看完有一种豁然开朗的感觉，一些之前未能理解的CSS元素行为也知其所以然了。顺便说一下，前端的水也是很深的（且越来越深），在具体工作中可以分为偏前和偏后两个大方向，偏前的前端关注设计、HTML、CSS；偏后的前端侧重于JavaScript和前端工程化；然而一个合格的前端工程师必须前后都熟练掌握其常用知识技能，在这个基础上才谈得上选择往前还是往后发展。

一、什么是BFC？

BFC全称Block Formatting Context，即“块级格式化上下文”，是一种渲染区域，由块状元素触发生成，借助它的一些特性可以方便地排版。

二、BFC有什么特性？

对外：

从外面看，BFC是一个独立的渲染区域，类似于一个封闭的黑盒，里面的任何元素的任何属性都不会该区域外产生任何影响。因此，BFC元素不会与float元素发生交叠，当遇到float元素时会自动“退缩”，利用该特性可以轻松实现自适应布局。另外，BFC内部的元素也不会与外面的元素发生margin重叠。

内部：

1.float元素参与BFC元素的高度计算，因此触发BFC是解决“高度塌陷”的方式之一。

2.BFC内部相邻Box元素会发生margin重叠

三、如何生成BFC？

以下条件满足其一即可在元素内部创建BFC。

1. float不为none
2. position为absolute或fixed
3. overflow为auto, hidden或scroll（只要不为visible）
4. display为table-cell，table-caption，inline-block, flex或inline-flex之一
5. fieldset元素

总之，BFC其实是一个很简单的概念（当然深挖肯定还有得挖，但一般使用的话知其然就够了），实际项目中的应用，一是解决高度塌陷，二是实现自适应布局，三是防止margin重叠。下次再遇到面试官就可以谈笑风生了，当然，更重要的是自己写CSS时更爽了！