BFC，block formatting context，块级格式化上下文。在日常开发中，有可能你听说过，或者没听过但是已经用过了。今天我们从原理来剖析BFC。
先看一个例子：
媒体对象
左边灰色背景的“块”一般成为“媒体对象”。媒体对象的左边是一张图片，右边是文本。我们将img设置为浮动，让文本和图片自然地左右排列。有些时候，我们不想让文本环绕图片，而是严格的分成左右两个部分。此时，我们就需要清除图片底部的浮动。
为了实现这种布局，需要为文本建立一个块级格式化上下文。我们修改下上面的代码：
创建BFC
创建BFC对元素做了以下事情：
- 包含了内部所有元素的上下外边距。它们不会跟BFC外面的元素产生外边距折叠。
- 包含了内部所有的浮动元素。
- 不会跟BFC外面的浮动元素重叠。
简而言之，BFC里的内容不会跟外部的元素重叠或者相互影响。如果给元素增加clear属性，它只会清除自身所在的BFC的浮动。如果强制给一个元素生成一个新的BFC，它不会跟其他BFC重叠。
如何给一个元素创建一个BFC呢？给元素添加以下任意属性都会创建BFC：
- float：left或right，不为none即可
- overflow：hidden，auto，scroll等，不为visible即可
- display：inline-block，table-cell，table-caption，flex，inline-flex，grid，inline-grid。（拥有这些属性的元素成为块级容器）
- position：absolute，fixed
浮动在现在的前端开发中已经不再那么流行，因为在很多场景有新的替代特性，比如flex、grid布局，还有就是float有很多细节点需要考虑，稍微不注意就会产生不合预期的表现。今天我们学习的BFC就是对浮动布局的一个辅助，要记住BFC的应用场景以及如何创建一个BFC，才能在使用float的时候更加得心应手！
上面提供了很多创建BFC的方式，之前的例子中，我们使用的是overflow：auto；有小伙伴知道如果使用别的方式会达到效果吗？会有副作用吗？欢迎在评论区留言和我讨论～
,
