了解BFC - CSS - 前端 | Sakura Snow = 雪之樱的小站 = 随缘记录

# 前言

这是一篇笔记，因为一直对这部分的知识看了就忘，今天闲着无事翻了翻不少资料，所以有了这篇文章

# 怎么理解 BFC

首先，我们要知道 BFC 的全称是 Block Formatting Context，翻译成中文是块级格式化上下文，这里介绍下怎么理解 Formatting Context，Formatting Context 实际上是一种上下文环境，在这个上下文里的元素会与外界隔离，并且按照这个上下文里的规则排序和渲染，Block Formatting Context 就是一种上下文，其他上下文还有

Inline formatting context : 行内格式化上下文
flex formatting context : 设置了 display 为 flex 创建的上下文
grid formatting context : 设置了 display 为 grid 创建的上下文

# 怎么创建 BFC

常见：

根元素（html 元素）
浮动元素（元素的 float 不是 none）
绝对定位元素（元素的 position 为 absolute 或 fixed）
overflow 值不为 visible 的块元素
行内块元素（元素的 display 为 inline-block
弹性元素（display 为 flex 或 inline-flex 元素的直接子元素）
网格元素（display 为 grid 或 inline-grid 元素的直接子元素）

不常见：

表格单元格（元素的 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）
display 值为 flow-root 的元素
contain 值为 layout、content 或 paint 的元素
多列容器（元素的 column-count 或 column-width 不为 auto，包括 column-count 为 1）
column-span 为 all 的元素始终会创建一个新的 BFC，即使该元素没有包裹在一个多列容器中（标准变更，Chrome bug）。

# BFC 内部的元素排序规则

在普通流下的 BFC 内部的块级盒会在垂直方向上一个接一个排列。
同一 BFC 下的相邻块级元素会发生垂直方向的外边距折叠
BFC 是一个独立的容器外面的元素不会影响 BFC 内部反之亦然。

# 形成了 BFC 元素的特殊性质

计算 BFC 元素的高度时，浮动元素也会参与计算。
浮动盒的区域不会和 BFC 元素重叠。

# BFC 的常见用处

# 自适应两栏布局

利用的是浮动盒的区域不会和 BFC 元素重叠这个特性

	<style>
	.left {
	width: 100px;
	height: 200px;
	background-color: darkseagreen;
	float: left;
	}
	.right {
	height: 200px;
	background-color : cornflowerblue;
	// 触发BFC 让这个div不和左边的的div重叠
	overflow: hidden;
	}
	</style>
	<body>
	<div class="container">
	<div class="left">left</div>
	<div class="right">right</div>
	</div>
	</body>

# 处理 margin 重叠

因为同一 BFC 下的相邻块级元素会发生垂直方向的外边距折叠，所以只要让两个块元素不在同一个 BFC 下就可以处理 margin 重叠的问题了

兄弟元素间的 margin 重合

	<style>
	.p {
	background: aquamarine;
	margin: 100px 0;
	height: 100px;
	}
	.wrapper {
	// 触发BFC
	overflow: hidden;
	}
	</style>
	<body>
	<p class="p">p1</p>
	<div class="wrapper">
	<p class="p">p2</p>
	</div>
	</body>

父子元素间的 margin 重合

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<style>
	.p {
	background: aquamarine;
	margin: 100px 0;
	height: 100px;
	}
	.wrapper {
	overflow: hidden;
	margin-bottom: 100px;
	}
	</style>
	</head>
	<body>
	<!-- <p class="p">p1</p>-->
	<div class="wrapper">
	<p class="p">p2</p>
	</div>
	<div>rua</div>
	<!-- <p class="p">p1</p>-->
	</body>
	</html>

# 处理浮动引起的高度塌陷

这里使用的是计算 BFC 元素的高度时，浮动元素也会参与计算这个特性。

	<style>
	.container {
	border: 1px solid black;
	overflow: hidden;
	}
	.left {
	width: 100px;
	height: 150px;
	background-color: darkseagreen;
	float: left;
	}
	</style>
	<body>

	<div class="container">
	<div class="left">left</div>
	</div>
	</body>

# 参考链接

MDN-BFC
MDN-IFC
MDN-forrmat context
行内格式化上下文介绍
什么是 BFC

CSS