BFC 块级格式化上下文

1. BFC概念描述

1.1 CSS规范中对 BFC 的描述

9.4.1 块格式化上下文

浮动,绝对定位元素,非块盒的块容器(例如,inline-blocks,table-cells和table-captions)和'overflow'不为'visible'的块盒会为它们的内容建立一个新的块格式化上下文

在一个块格式化上下文中,盒在竖直方向一个接一个地放置,从包含块的顶部开始。两个兄弟盒之间的竖直距离由'margin'属性决定。同一个块格式化上下文中的相邻块级盒之间的竖直margin会合并

在一个块格式化上下文中,每个盒的left外边(left outer edge)挨着包含块的left边(对于从右向左的格式化,right边挨着)。即使存在浮动(尽管一个盒的行盒可能会因为浮动收缩),这也成立。除非该盒建立了一个新的块格式化上下文(这种情况下,该盒自身可能会因为浮动变窄)

1.2 MDN 对 BFC 的描述

https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Block_formatting_context

块格式化上下文(Block Formatting Context,BFC) 是Web页面的可视化CSS渲染的一部分,是块盒子的布局过程发生的区域,也是浮动元素与其他元素交互的区域。

一个块格式化上下文由以下之一创建:

  • 根元素或包含根元素的元素
  • 浮动元素(元素的 float 不是 none)
  • 绝对定位元素(元素的 position 为 absolute 或 fixed)
  • 行内块元素(元素的 display 为 inline-block)
  • 表格单元格(元素的 display为 table-cell,HTML表格单元格默认为该值)
  • 表格标题(元素的 display 为 table-caption,HTML表格标题默认为该值)
  • 匿名表格单元格元素(元素的 display为 table、table-row、 table-row-group、table-header-group、table-footer-group(分别是HTML table、row、tbody、thead、tfoot的默认属性)或 inline-table)
  • overflow 值不为 visible 的块元素
  • display 值为 flow-root 的元素
  • contain 值为 layout、content或 strict 的元素
  • 弹性元素(display为 flex 或 inline-flex元素的直接子元素)
  • 网格元素(display为 grid 或 inline-grid 元素的直接子元素)
  • 多列容器(元素的 column-count 或 column-width 不为 auto,包括 column-count 为 1)
  • column-span 为 all 的元素始终会创建一个新的BFC,即使该元素没有包裹在一个多列容器中

块格式化上下文包含创建它的元素内部的所有内容.

块格式化上下文对浮动定位(参见 float)与清除浮动(参见 clear)都很重要。浮动定位和清除浮动时只会应用于同一个BFC内的元素。浮动不会影响其它BFC中元素的布局,而清除浮动只能清除同一BFC中在它前面的元素的浮动。外边距折叠(Margin collapsing)也只会发生在属于同一BFC的块级元素之间。

1.3 张鑫旭对 BFC 的描述

http://www.zhangxinxu.com/wordpress/2015/02/css-deep-understand-flow-bfc-column-two-auto-layout/

BFC全称”Block Formatting Context”, 中文为“块级格式化上下文”......总之,记住这么一句话:BFC元素特性表现原则就是,内部子元素再怎么翻江倒海,翻云覆雨都不会影响外部的元素。所以,避免margin穿透啊,清除浮动什么的也好理解了。

2. BFC功能理解

2.1 父元素管子元素

可以用 BFC 包住浮动元素。

<div class="parent">
  <div class="child">
</div>
.parent{
  border: 10px solid red;
  min-height: 10px;
  display: flow-root; /*触发BFC*/
}
.child{
  background: green;
  float:left;
  width: 300px;
  height: 100px;
}

2.2 兄弟元素之间划清界限

可以用 float + div 做左右自适应布局

<div class="brother">brother</div>
<div class="little-brother">little-brother</div>
.brother {
  width: 100px;
  min-height: 600px;
  border: 3px solid red;
  float: left;
  margin-right: 20px;
}

.little-brother {
  min-height: 600px;
  border: 5px solid green;
  display: flow-root;
  
}

IFC 行级格式化上下文

特性简记

  • font-size 是字体的em-square
  • line-height 实际占地高度
  • 100px 100px -> 103px: 因为不同字体元素会撑高父行元素
  • vertical-align:
    • top
    • middle
    • bottom
    • text-top
    • text-bottom
  • 图片下面有空隙解决办法:
    • vertical-align: top
    • img{ display: block; }
    • font-size: 0 不推荐使用
  • inline-block 元素对不齐
    • 无解
    • 用 flex 或 float
  • inline-block 有空隙
    • 用 flex 或 float