首页 > 代码库 > 关于块级格式化上下文(Block formatting context)
关于块级格式化上下文(Block formatting context)
不是谁都像你一样只向着前方就能活下去了，你就抛弃那些没用的同伴前行就好了，你注定是要成为海贼王的男人吧，而我就算没有远大的目标也可以。——《one piece》
Block formatting context(以下简写为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闭合浮动
.png)
BFC能创造闭合浮动，里面的元素即使不用清除浮动，也不会溢出。例子中珊瑚色和天空蓝色的方块分别是左浮动和右浮动，但是它们都处于BFC闭合浮动中，别的说法是BFC中的元素参与高度计算。
demo
3.BFC元素不会与浮动元素叠加
根据概念，当一个BFC元素与浮动元素相邻时，触发BFC的元素的外边框不会与浮动元素的外边距叠加。
.png)
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
关于块级格式化上下文(Block formatting context)
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。