跳到主要内容

使用 BFC 解决父元素高度塌陷问题

块级格式上下文（ Block Formatting Context ， BFC ）为元素提供了一个独立的布局环境，环境中的内容不会影响到环境外的布局，环境外的布局也不会影响到环境中的内容。 BFC 就像是一个围城的围墙，使得围墙里的东西出不去，围墙外的东西也进不来。

BFC （ Block Formatting Context ）即块格式化上下文，它既不是一个 CSS 属性，也不是一段代码，而是 CSS2.1 规范中的一个概念，决定元素的内容如何渲染以及与其它元素的关系和交互。可以将 BFC 想象成一个箱子， BFC 中的内容就相当于箱子中的物品，将物品摆放在箱子中，能避免与其它箱子中的物品混淆，还能保护它们不被破坏。接下来简单概括一下 BFC 的 5 条规则。

  • BFC 有隔离作用，内部元素不会受外部元素的影响
  • 一个元素只能存在于一个 BFC 中，如果能同时存在于两个 BFC 中，那么就违反了 BFC 的隔离规则
  • BFC 内的元素按正常流排列，元素之间的间隙由元素的外边距（ margin ）控制
  • BFC 中的内容不会与外面的浮动元素重叠
  • 计算 BFC 的高度，需要包括 BFC 内的浮动子元素的高度

创建 BFC​

如果要创建 BFC ，那么必须满足下列条件中的一个 :

  • 根元素，也就是 html 元素
  • float 属性不为 none 的浮动元素
  • position 属性是 absolute 或 fixed 的定位元素
  • display 属性为 inline-block 、 table-cell （相当于 td 或 th 元素）、 table-caption （相当于 caption 元素）或伸缩盒（ flex 和 inline-flex ）的元素
  • overflow 属性不为 visible 的块级元素

BFC 的用途​

清除浮动 解决外边距塌陷 宽度自适应的两栏布局 inline-block 触发 BFC

当将一个元素设置为行内块元素时会触发 BFC ，此时该元素内部发生的任何变化都只局限于元素内部。因为触发了 BFC ，所以每一个行内块元素都具有"包裹性"，当其中存在浮动元素时，行内块元素的"包裹性"就能包住浮动元素，从而起到了清除浮动的作用。当元素不是行内块元素时，可以通过 display:inline-block 的样式代码使之转化为行内块元素，以此来触发元素的 BFC 。

给父元素设置浮动触发 BFC​

如果浮动元素的父元素也有浮动属性，此时也能触发父元素的 BFC 机制，从而包含住浮动元素。

如果想让子级与父级的中心点重合，则需要子级的位置向上移动本身高度的一半，和向左移动本身宽度的一半。

  • 根据父级进行绝对定位，如果在浏览器中水平垂直居中，那么父级就是 html 元素
  • top 值和 left 值为父级的 50%
  • inline-block 触发 BFC

hasLayout​

hasLayout 是微软的一个私有概念，类似于 BFC ，能够运行在早期的 IE6 和 IE7 中，但在 IE8 及之后的版本中已经被抛弃。在早期的 IE 浏览器中，元素会被分为拥有布局（ has layout ）和没有布局，拥有布局的元素可以控制自己内容的尺寸和位置，而没有布局的元素需要由最近的拥有布局的祖先元素代劳。 IE6 中的很多 BUG 都是由于元素没有布局所引起的，例如浮动元素会引起双倍外边距（即 10px 的外边距会变成 20px ）。可以通过定义特定的 CSS 属性来触发 hasLayout ，使得这个元素拥有布局。