CSS BFC 扫盲篇

2019独角兽企业重金招聘Python工程师标准>>>

有人问我对 CSS 的 BFC 了解多少，我一脸懵逼。后来谷歌查询了一番，发现工作中已经多次使用了 BFC 特性却不自知，比如清除浮动我知道用 overflow: hidden; 那时候还纳闷为啥加了这句就可以清除浮动，原来底层原理是由 BFC 决定的。

BFC 是什么？

BFC 提供页面布局的一套规则：

• 规则一：计算 BFC 的高度时，浮动元素也参与计算；
• 规则二：BFC 的区域不会与 float box 重叠；
• 规则三：Box 垂直方向的距离由 margin 决定。属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠。

怎么实现 BFC？

可以通过为 html 标签添加如下属性使其具有 BFC 的布局规则。最常见方式为设置 overflow: hidden 属性。

• 根元素 html；
• float 属性不为 none；
• position 为 absolute 或 fixed；
• display 为 inline-block, table-cell, table-caption, flex, inline-flex；
• overflow 不为 visible，最常见的 overflow 为 hidden。

BFC 能解决什么问题？

清除浮动

	
子div

        

上图，父 div 的高度根据子 div 高度自适应。

现在将子 div 设置为浮动元素，子 div 脱离文档流，父 div 的高度变成了 0。

BFC规则一：计算BFC的高度时，浮动元素也参与计算。

要想父 div 具有 BFC 的特性，参考上面?“怎么实现 BFC”，最常用的方式是添加属性 overflow: hidden 。添加该属性后可以发现父 div 又具有高度了！

.parent {
  background: blue;
  width: 150px;
  border: 5px solid red;
  overflow: hidden;		
}

自适应双栏布局

之前做双栏布局都在用 flex。

  
左边
  
右边
    

上面?的代码可以看到外面还有一层 div(.container) 包裹着。这会学了 BFC，有了更简单的实现方式。

规则二：BFC的区域不会与float box重叠；

左边
右边
    

可以看到，这里不需要外层 div 包裹了。左边添加 float，右边设置成 BFC。

其它问题

在网上还看到可以解决外边距重叠等问题，实际工作中并没有应用过，感兴趣的可以阅读下面?的扩展文章。

参考文章

• CSS深入理解流体特性和BFC特性下多栏自适应布局
• 理解CSS中的BFC(块级可视化上下文)[译]
• 前端精选文摘：BFC 神奇背后的原理

转载于:https://my.oschina.net/dkvirus/blog/3015165