你真的懂什么是BFC么？教你一下让你知道怎么理解BFC的用法与技巧

块级上下文BFC概念

BFC（块级上下文Block Formatting Context）的概念由W3C颁布，主要解决的是多个元素垂直排列的时候边距合并的问题，也就是说如果父元素在垂直方向排列的时候其内部元素的外边距会出现折叠。

BFC 定义元素内垂直排列的所有元素，可以看做一个维度。然后，所有 BFC 之内垂直排列的所有元素，可以看做另一个维度。

一句话，元素的直系后代元素的垂直方向的距离 ，BFC 最主要的一个特点就是，当元素满足一些条件的情况下，才会成为 BFC。

BFC 的特点

• 如果元素成为 BFC，元素内多个元素垂直方向排列时，其元素的外边距才会发生合并。

• BFC 有两个必要条件：

  • 元素必须是垂直方向上排列的。
  • 元素不能是根元素。

常见的元素为 BFC

• HTML 标签本身不会成为 BFC，但是 HTML 标签中元素是垂直方向排列的时候，所有元素才作为一个元素去理解。
• 如果元素是水平排列，即使该元素是垂直方向元素也不能成为 BFC。

在什么情况下会触发 BFC

会触发 BFC

• 根元素 HTML 标签内部元素垂直排列的时候，根元素即成为 BFC 的根 。
• 元素设置为浮动，强制脱离元素本身，元素内垂直排列的时候，元素成为 BFC 的根 。
• 元素内部元素垂直排列的时候，元素成为 BFC 的根 。

不触发 BFC

• 行内元素，即使有多个，在一个元素内垂直排列也不会成为 BFC 的根。
• 隐藏的元素，即使有垂直方向排列的多个元素，也不会成为 BFC 的根。
• 元素内部元素垂直排列的时候，元素内部元素成为 BFC 的根 。
• 元素设置定位绝对或者相对，元素内部元素垂直排列的时候，元素内部元素成为 BFC 的根 。
• 元素设置 clear 属性，元素内部元素垂直排列的时候，元素内部元素成为 BFC 的根 。

理解 BFC 的好处

• 更好的理解布局和元素排列。
• 深入理解元素排列的优先级。
• 触发或避免元素成为 BFC，更好的解决多元素垂直排列出现的外边距合并。
• BFC 结合绝对相对定位，在很多时候是成为神奇的特效技巧。

BFC 和边距折叠

• BFC 是元素内元素垂直排列的时候才会出现外边距合并，元素内部元素作为一个元素去理解。
• 元素外边距合并，就是因为 BFC 内部元素垂直排列出现的外边距合并。

结语

BFC 理解起来比较难，但是如果我们将它代入到项目中就非常容易了，但是它本身就是一个非常好的东西，能让我们项目中解决垂直方向元素排列时出现的外边距合并问题，有时能让我们项目的效果达到更好的效果，BFC 同样也能配合项目进行优化，所以它还是值得学习的。