什么是BFC?

BFC定义

BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

Box：css布局的基本单位

Box 是 CSS 布局的对象和基本单位,一个页面是由很多个 Box 组成的。元素的类型或者说 display 属性，决定了这个 Box 的类型。Box 的类型由以下两种（或说三种）：

  • （块元素）block fomatting context：display 属性为 block, list-item, table 的元素，会生成 block-level box；
  • （内联元素）inline formatting context：display 属性为 inline, inline-block, inline-table 的元素，会生成 inline-level box；
  • 当 display 属性是 run-in 时，元素根据上下文决定是块元素还内联元素，
    • 如果 run-in box 包含 block box，那么这个 run-in box 也成为 block box
    • 如果紧跟在 run-in box 之后的兄弟节点是 block box，那么这个 run-in box 就会做为此 block box 里的 inline box，run-in box 不能进入已经一个已经以 run-in box 开头的块内，也不能进入本身就是 display:run-in 的块内
    • 其他情况下 run-in box 成为 block box

Formatting Context

Formatting context 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。最常见的 Formatting context 有 Block fomatting context (BFC)和 Inline formatting context (IFC)。
不论是 BFC 还是 IFC 指的都是父子元素或者兄弟元素之间的关系

BFC 的布局规则

  • 内部的Box会在垂直方向，一个接一个地放置。
  • Box垂直方向的距离由margin决定。属于同一个 BFC 的两个相邻Box的margin会发生重叠。
  • 每个盒子（块盒与行盒）的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
  • BFC的区域不会与float box重叠。
  • BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
  • 计算BFC的高度时，浮动元素也参与计算

如何创建BFC

  • float 的值不能是 none 。
  • position 的值不是 static 和 relative 。
  • display 的值是 inline-block、table-cell、flex、table-caption或者inline-flex
  • overflow 的值不是visible 。

使用案例

  1. 利用BFC避免margin重叠
    根据 BFC 布局规则第二条，属于同一个 BFC 的两个相邻Box的margin会发生重叠，
<body>
	<p style="margin:20px;">1</p>
	<p style="margin:20px;">2</p>
</body>

以上情况，两个 p 标签之间的间距，实际上还是20px，可以使用两个带有 overflow:hidden 属性的div包裹，这样两个 p 标签就不属于同一个 BFC 了

<body>
	<div style="overflow:hidden;">
		<p style="margin:20px;">1</p>
	</div>
	<div style="overflow:hidden;">
		<p style="margin:20px;">2</p>
	</div>
</body>
  1. 解决因为浮动引起的高度塌陷
  • 不触发 BFC
<body>
	<div style="min-height: 20px;">
		<p style="float:left;height: 120px;"></p>
	</div>
</body>
  • 触发 BFC
<body>
	<div style="min-height: 20px;overflow: hidden;">
		<p style="float:left;height: 120px;"></p>
	</div>
</body>
  1. 多栏布局
  • 不触发 BFC
<body>
	<p style="float:left;height: 120px;">1</p>
	<div style="height: 200px;">2</div>
<body>
  • 触发 BFC
<body>
	<p style="float:left;height: 120px;">1</p>
	<div style="height: 200px;overflow: hidden;">2</div>
<body>
posted @ 2021-11-19 17:06  庐陵猿客  阅读(193)  评论(0)    收藏  举报