BFC

3 BFC

3.1 什么是 BFC

Block Formatting Context 简称 BFC，中文翻译为 块级格式上下文。

① W3C 中对 BFC 的定义

Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes, and block boxes with ‘overflow’ other than ‘visible’ (except when that value has been propagated to the viewport) establish new block formatting contexts for their contents.

译文：

浮动、绝对定位元素、不是块盒子的块容器(如inline-blocks、table-cells和table-captions)，以及overflow属性的值除visible以外的块盒(除非该值已传播到视口)，将为其内容建立新的块格式化上下文。

https://www.w3.org/TR/CSS22/visuren.html#block-formatting

② MDN 上对 BFC 的定义

A block formatting context is a part of a visual CSS rendering of a web page. It’s the region in which the layout of block boxes occurs and in which floats interact with other elements.

译文：

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

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context

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

③ 到底什么是 BFC

首先，BFC 的意思是 Block Formatting Context ，即块级格式上下文。 然后，当元素满足了某些条件，我们认为该元素创建了 BFC。 创建了 BFC 的元素我们可以把他看做是一个独立的容器，容器内的元素不论如何布局都不会影响到外面。

3.2 创建 BFC 的方式

• 根元素
• 绝对定位和固定定位的元素
• 浮动元素
• 行内块元素
• 表格元素： td、th、tr、tbody、thead、tfoot、caption、table
• 设置 overflow 属性且值不是 visible 的元素
• 伸缩项目 （注意：不是伸缩容器）
• 多列容器（设置了column-count或column-width属性的元素）
• 设置了 CSS 样式 column-span:all 的元素（即使不是多列容器的子元素设置该属性也开启BFC）

3.3 创建 BFC 可以解决的问题

• 解决子元素浮动的影响
• 解决子元素的 margin 塌陷（第一个子元素的上外边距和最后一个子元素的下外边距会塌陷到父元素上）