关于块级格式化上下文(Blockformattingcontext)

作者：94爱拍就是爱拍 | 来源：互联网 | 2023-09-02 11:58

不是谁都像你一样只向着前方就能活下去了，你就抛弃那些没用的同伴前行就好了，你注定是要成为海贼王的男人吧，而我就算没有远大的目标也可以。——《onepiece》

Block formatting contex t(以下简写为BFC)又称做块级格式化上下文，源自CSS2.1 规范中的Visual formatting model，Visual fomatting model定义了视觉媒体该怎样处理文档内容,BFC属于Normal flow(正常流)，它与其他正常流元素并没有本质的区别，BFC在CSS3中叫做 flow root 。了解怎样创建BFC，BFC的特性，以及它与其他属性 (如 float , clear 和 margin )的相互作用。总而言之，BFC创造了一个的坏境，这个相对独立的环境，决定了它怎样影响外部和内部。

一，创建Block formatting context

满足以下任意一个条件，都将创建新的BFC.

浮动元素;
position的值除static和relative以外的值;
display:table-cell元素;
display:table-caption元素;
display:inline-block元素;
元素设置overflow值且不为"visible"(hidden | scroll | auto)[除非传播到视窗外];

display:table 本身并不会创建BFC，但因为它能生成匿名框，他们其中之一( display:table-cell )会创建BFC。换句话说，创建BFC的并不是 display:table ,而是 display:table-cell。 position:fixed 也会创建BFC，因为 fixed 属于绝对定位的一个子类。另外一个创建BFC的是 fieldset 元素，说来奇怪，在 www.w3.org 没有此信息。有提到这个是浏览器，但是有没有官方文档。事实上，如果fileset在大多数浏览器触发BFC的话，也不要认为其是理所当然的。 CSS2.1 并没有定义当属性应用与 form 和 frames 时的情况。

二，Block formatting context的特性

BFC与非BFC元素区分的重要点是BFC的特性，BFC主要有三个特性。

属于不同BFC中的想邻元素的垂直外边距将不会合并;
BFC闭合浮动;
BFC元素不会与浮动元素叠加;

1.Block formatting context禁止外边距叠加：

每个段落的上下垂直外边距都是1em,因为段落3处于一个新创建的BFC中，所以上边距不会像段落2和段落1一样，发生合并。所以段落2和段落3的距离变成了2em。

demo

2.Block formatting context闭合浮动

BFC能创造闭合浮动，里面的元素即使不用清除浮动，也不会溢出。例子中珊瑚色和天空蓝色的方块分别是左浮动和右浮动，但是它们都处于BFC闭合浮动中，别的说法是BFC中的元素参与高度计算。

demo

3.BFC元素不会与浮动元素叠加

根据概念，当一个BFC元素与浮动元素相邻时，触发BFC的元素的外边框不会与浮动元素的外边距叠加。

demo

　　如上图，第一种情况是黄色未浮动元素的一部分与浮动元素叠加，第二种是黄色块触发了BFC，BFC创造了一个隐形的外边距。如果我们要在两个元素之间制造一些空间，可以给左浮动元素添加外边距，或者给BFC元素添加大于浮动宽度的外边距。从而没有与浮动元素叠加，这个特性是非常有用的特性。一种最简单的应用BFC布局的就是左图右文字的布局。

三，Block formatting context与hasLayout的比较

你可能注意到前面例子中样式设置 overflow:hidden;zoom:1;前面一个声明会创建BFC，后一个属性会在Internet Explorer 8(S)以下中触发hasLayout， zoom是设置或检索所选对象的缩放比例，它是有些的浏览器私有属性，Firefox和Opera并不支持，使用很少，但是它却能触发hasLayout，加上IEhack,就能兼容不支持BFC的浏览器。hasLayout是IE浏览器的私有属性，因为IE低版本浏览器并支持W3C的BFC，但因为两者是非常接近的，触发条件和BFC也类似，hasLayout也有BFC的相关特性。但是hasLayout和BFC的触发条件不尽相同，所以同时保证它们都触发是很重要的。

下列属性会触发hasLayout：

Internet Explorer 5 and 6