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

最新推荐文章于 2023-06-23 00:40:16 发布

weixin_30299539

最新推荐文章于 2023-06-23 00:40:16 发布

阅读量126

点赞数

原文链接：http://www.cnblogs.com/letitgo/p/4201190.html

版权

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

转载于:https://www.cnblogs.com/letitgo/p/4201190.html