什么是BFC？如何创建BFC？

BFC，块级格式化上下文，你可以把它理解成页面渲染里一个独立的“结界”。在这个结界内部的元素布局，不会影响到外部的元素。很多CSS里让人头疼的布局问题，比如外边距合并、浮动元素导致的父容器高度塌陷，其实都能通过触发BFC来优雅解决。

这么说可能有点抽象，咱们看个典型问题。如果一个父元素里只包含浮动子元素，它自己高度就会塌陷成零，背景边框什么的都看不见了。这时候，给父元素创建一个BFC，它就能自动计算浮动子元素的高度，把自己撑开。

.parent {
  overflow: hidden; /* 一个简单的创建BFC的方法 */
}

这段代码里的 overflow: hidden 就让 .parent 成了一个BFC容器，浮动子元素被包裹在内，父容器高度恢复正常。

创建BFC的方法有好几种，都是通过给元素设置一些特定的CSS属性来实现的。比如，设置 float 值不为 none，元素就会成为一个BFC。或者把 position 属性设为 absolute 或 fixed 也行。常用的 display 属性值，比如 inline-block、table-cell、flex 或 grid，也都能触发BFC。

还有一个特别常用的属性是 overflow，只要它的值不是默认的 visible，比如设为 hidden、auto 或 scroll，同样能创建BFC。在HTML5的现代布局实践中，我们经常会利用这个特性。

理解BFC的核心，在于记住它建立了独立的布局环境。里面的盒子垂直排列，外边距不会和外面的兄弟元素合并，它也会包裹住内部的浮动元素。下次当你被浮动塌陷或者外边距穿透搞得没脾气时，试试给相关元素触发个BFC，往往就是那剂对症的解药。