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元素可以阻止被浮动元素遮盖
展示效果