BFC有啥用？

BFC（Block Formatting Context）块级格式化上下文。是个什么东西呢？

在讲解BFC之前我们会先讲色情，要开车了吗？当然不是，请你先在脑海中想一想，色情是什么，如何定义？

是不是觉着不好定义？

我们看看联邦最高法院大法官斯图尔特是如何说色情的

我不知道什么是色情，不过，我看了之后，就能知道

BFC就是如此。我不知道BFC是个什么东西？但我知道它有什么用。看下面个例子：

子元素设置浮动之后，父元素就包裹不住了，这是浮动元素的特性。

image.png

但我们想让他包裹住该怎么做呢？我们这时可以生成一个BFC，

image.png

有兴趣的可以一一试以下方法生成的BFC，都可以实现以上父元素包裹住子元素。

一个块格式化上下文由以下之一创建：

根元素或其它包含它的元素
浮动元素 (元素的 float 不是 none)
绝对定位元素 (元素具有 position 为 absolute 或 fixed)
内联块 (元素具有 display: inline-block)
表格单元格 (元素具有 display: table-cell，HTML表格单元格默认属性)
表格标题 (元素具有 display: table-caption, HTML表格标题默认属性)
具有overflow 且值不是 visible 的块元素，
display: flow-root
column-span: all 应当总是会创建一个新的格式化上下文，即便具有 column-span: all 的元素并不被包裹在一个多列容器中。

但tm仔细一想，清除浮动也可以实现以上操作啊！而且还没有副作用！

image.png

哈哈哈，这就是BFC的牛逼之处，没得用，副作用多，但是面试喜欢问啊！其实仅仅就是BFC已经过时啦！

不信？看下面这个BFC的例子：

image.png

两个兄弟元素，其中.gege左浮动之后，didi会把它覆盖住，但这不是我们想要的效果，我们想要的是两个应该是分开的，而不是在一起的！这时我们也可以生成一个BFC：

image.png

但是TM的flex可以很好解决这个问题啊,右边还是自适应宽度，多好！

image.png

所以综上所述，BFC只是一个时代的产物，现在有许多的替代方案，可以完美解决BFC能够解决的问题，所以当你面试遇到BFC时就举上面BFC的两个例子(父元素管子元素，兄弟元素划清界限)，然后说说哪些情况能够触发BFC就OK啦！