CSS之BFC

BFC (Block Formatting Contexts)

块级格式化上下文
什么是Formatting context： （格式化上下文） 是W3C CSS2.1规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。
所有在常规流中的元素都仅属于一种格式化上下文（Inline formatting contexts 与 Block formatting contexts），它规定了该元素的渲染规则。

如何使一个元素触发bfc：
1、浮动元素：float除none以外的值
2、绝对定位元素：position（absolute、fixed）
3、display为inline-block、table-cells、flex, table-captions（包括这些但不限于这些）
4、overflow除了visible以外的值（hidden、auto、scroll）

BFC渲染规则

BFC元素是一个独立的渲染区域，只规定了内部的块级元素如何渲染布局，不会对外部造成任何影响
1、在BFC元素中，内部的块级元素从顶部开始一个接一个地垂直排列。
2、在BFC元素中相邻块级元素之间的垂直边距折叠（取最大的一个边距）。
3、BFC内部元素的左外边距（margin-left）， 与BFC元素的左边线（boder-left）相接触(对于从左往右的格式化的相反)。即使存在浮动也是如此。
4、BFC元素不会与浮动元素重叠（可以“看见”浮动元素）。

BFC应用实例

解决父级元素不能包含子集浮动元素的问题

在触发了BFC之后：（外围红色的父级元素可以包围子集浮动元素）

margin 塌陷问题

如图，子集元素没有相对父级元素产生300px的margin，反而带着父级元素一起运动
在父级元素中触发BFC就会解决这个问题：

BFC元素可以阻止被浮动元素遮盖

展示效果