白话Block Formatting Context

转载须写明出处,附带本文链接。关于文中的示例,用标准浏览器查看。

一,啥是Block Formatting Context

当涉及到可视化布局的时候,Block Formatting Context提供了一个环境,HTML元素在这个环境中按照一定规则进行布局。一个环境中的元素不会影响到其它环境中的布局。

为了让我们有个感性的认识,举个不太合适的例子。你可以把一个页面想象成大的集装箱,这个集装箱里装的货物就是HTML元素。在现实生活中为了避免不同人的货物相互混淆,都是把货物打好包装再装入集装箱,这样的话无论你包装里面的货物怎么摆放,都不会影响到其他人的货物。那么这个包装就可以被想象成Block Formatting Context。

二,怎样才能形成Block Formatting Context

当一个HTML元素满足下面条件的任何一点,都可以产生Block Formatting Context

  • float的值不为none。
  • overflow的值不为visible。
  • display的值为table-cell, table-caption, inline-block中的任何一个。
  • position的值不为relative和static。

三,Block Formatting Context在生产中有什么作用

  1. Block Formatting Context可以阻止边距折叠(margin collapsing)。我们知道在一般情况下,两个上下相邻的盒子会折叠它们垂直方向接触到的边距,这种情况只会发生在同一个Block Formatting Context中。换句话说,在同一个布局环境中(Block Formatting Context)是边距折叠的必要条件。这也就是为什么浮动的元素和绝对定位元素不会发生边距折叠的原因(当然还有很多种情况也不会折叠)。

  2. Block Formatting Context可以包含内部元素的浮动。考虑一下下面的例子(请用标准浏览器查看):
    <!DOCTYPE html>
    <html>
    <head>
    	<title>Demo</title>
    	<style type="text/css">
    		html, body {
    			margin: 0;
    			padding: 0;
    		}
    		#red, #orange, #yellow, #green {
    			width: 100px;
    			height: 100px;
    			float: left;
    		}
    		#red {
    			background: red;
    		}
    		#orange {
    			background: orange;
    		}
    		#yellow {
    			background: yellow;
    		}
    		#green {
    			background: green;
    		}
    	</style>
    </head>
    <body>
    	<div id="c1">
    		<div id="red"></div>
    		<div id="orange"></div>
    	</div>
    	<div id="c2">
    		<div id="yellow"></div>
    		<div id="green"></div>
    	</div>
    </body>
    </html>

    在上面的代码本意是做一个两行两列的布局,但是由于#red, #orange, #yellow, #green这四个div同在一个布局环境中,即便通过#c1, #c2这两个div划分,浮动之后它们还会一个接着一个排列,并不会换行。我们要做的就是把这四个div两两划分到不同的布局环境之中,从而闭合浮动。通过上面的分析,让#c1形成新的Block Formatting Context就可以解决问题。

  3. Block Formatting Context可以阻止元素被浮动覆盖。请看示例:
    <!DOCTYPE html>
    <html>
    <head>
    	<title>Demo</title>
    	<style type="text/css">
    		html, body {
    			margin: 0;
    			padding: 0;
    		}
    		#left {
    			width: 100px;
    			height: 100px;
    			background: red;
    			float: left;
    		}
    		#right {
    			height: 200px;
    			background: yellow;
    		}
    	</style>
    </head>
    <body>
    	<div id="left"></div>
    	<div id="right"></div>
    </body>
    </html>

    在标准浏览器下可以看到,普通的#right元素被浮动的#left元素所覆盖了。要想避免这种情况,有一种方法就是让#right形成新的Block Formatting Context。但是这里一定要注意的是,浮动不会覆盖的只是Block Formatting Context的border-box。换句话说,形成Block Formatting Context元素的margin还是会被浮动所覆盖掉的。

如果想全面了解Block Formatting Context,请看CSS 101: Block Formatting Context这篇文章。

白话Block Formatting Context》上有15条评论

  1. Pingback引用通告: 白话Block Formatting Context | 田园牧歌

  2. Pingback引用通告: Block Formatting Context

  3. Pingback引用通告: RockyChan.me » Block Formatting Context 学习

  4. Cson

    让c1形成新的布局环境是可以,但是我让C2形成新的布局坏境为什么就不可以呢?
    例如我设置c2 overflow:auto 就不可以了

  5. Pingback引用通告: css{布局:左栏固定,右栏自适应} | <前端开发>

  6. Pingback引用通告: css布局-左栏固定,右栏自适应 | web前端开发

  7. Pingback引用通告: 前端开发技术-css布局-左栏固定,右栏自适应 | web前端开发

  8. Pingback引用通告: web前端开发技术-css布局-左栏固定,右栏自适应 | web前端开发

  9. 297951292

    请问一下,这个Block Formatting Context和清除浮动是否有关?或者说清除浮动是触发Block Formatting Context的一个要素?清除浮动会把脱离文档流的元素拉回来,Block Formatting Context也会有这样的效果吗?因为Block Formatting Context的效果和清除浮动一样,能够恢复元素原来的高度。

  10. Pingback引用通告: 白话Block Formatting Context 前端修行 » 前端修行

  11. Pingback引用通告: TEDLife » BFC学习札记

  12. Pingback引用通告: 有关.clearfix的一些事 | 记事本

发表评论