BFC 全称 Block Formatting Context。

触发 BFC 的元素会变成一个独立的盒子,这个独立盒子里的布局不受外部影响,也不会影响到外面的元素。

部分可以产生 BFC 的方法：

  • float: left;

  • float: right;

  • position: absolute;

  • position: fixed;

  • display: inline-block;

  • display: flex;

  • display: inline-flex;

  • display: flow-root;

  • overflow: hidden;

  • overflow: auto;

  • overflow: scroll;

BFC 的功能：

  • 给父级元素【清除浮动】，避免高度塌陷。（即用 BFC 包住浮动元素，有一种说法是只有clearfix 才是清除浮动）

  • 防止垂直方向的【 margin 合并】（其实处理父子 margin 合并也有一种非 BFC 的方案是在父元素添加一个 border-top）。

  • 在【自适应两栏布局】中，可以用 BFC 避免浮动兄弟元素的遮盖。