关于块级格式化上下文(Block formatting context)

时间 2019-12-14

标签关于格式化上下文 block formatting context 繁體版

原文原文链接

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

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

position:absolute;
position:fixed;
float(除none的任意值);
display:inline-block;
width(除"auto"的任意值);
height(除"auto"的任意值);
zoom(除"normal"的任意值);
writing-mode:tb-rl;

Internet Explorer 7

min-width（任意值）;
min-height(任意值);
max-width(除"none"的任意值);
max-height(除"none"的任意值);
设置overflow属性的元素（除visible的任意）;
overflow-x和overflow-y(出visible的任意值);

要注意的是使用诸如 zoom 等浏览器私有属性通不过W3C验证，IE5.0并支持 zoom 属性。当子元素的布局流与父元素的布局流不一样时也会触发hasLayout(如rtl到ltr).

怪异模式和 IE7 mode

当overflow设置的值是除visible的时，table-cell元素不会建立新的block formatting context;
当overflow设置的值是visble时，table-cell会建立一个新的block formatting context;

　　1.元素自带hasLayout属性

在Internet Explorer中， <body> ( 在严格模式中 <html> 也是 ) <table>, <tr>, <th>, <td>, <img>, <hr>, <input>, <button>, <select>, <textarea>, <fieldset>, <legend>, <iframe>, <embed>, <object>, <applet>,<marquee> 。

四，总结

BFC是一个布局环境，它是一个相对独立的空间，决定它怎样影响外部和内部元素。BFC的本质是正常六，可是它主要有三个特性：属于不一样BFC中的相邻元素的垂直外边距不会合并，BFC能够闭合浮动，BFC元素不会与浮动元素叠加。由于低版本的浏览器（IE8(S)如下）没有BFC属性，可是它们有一个私有属性hasLayout，它的特性和BFC基本相同，可是它也可能致使一些bug。若是要兼容低版本浏览器（<IE8），能够给触发BFC的元素同时触发hasLayout（通常使用zoom:1），相反也是如此。

参考：http://w3help.org/zh-cn/causes/RM8002 、 http://www.yuiblog.com/blog/2010/05/19/css-101-block-formatting-contexts/ ，http://kayosite.com/block-formatting-contexts-in-detail.html