白话Block Formatting Context
作者：小寒 来源：记事本 时间：2010-08-03 12:36:00
一，啥是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在生产中有什么作用
Block Formatting Context可以阻止边距折叠（margin collapsing）。我们知道在一般情况下，两个上下相邻的盒子会折叠它们垂直方向接触到的边距，这种情况只会发生在同一个Block Formatting Context中。换句话说，在同一个布局环境中（Block Formatting Context）是边距折叠的必要条件。这也就是为什么浮动的元素和绝对定位元素不会发生边距折叠的原因（当然还有很多种情况也不会折叠）。
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就可以解决问题。
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还是会被浮动所覆盖掉的。
0
投稿猜你喜欢
asp(JavaScript)自动判断网页编码并转换的代码
Dreamweaver MX网页图片热区使用方法
让ASP组件来保护你的网站，自定义加密方法的使用
页面自动刷新javascript代码大全
js自定义快捷，IE,FF有良好的支持
浅谈 Mousewheel 事件
ASP分页显示Recordset数据
ASP 操作cookies的方法
网站构成的基本元素—网页布局
大家一起来折磨浏览器吧！(好玩的东东)
Oracle数据库游标使用大全
选择utf-8还是GB2312?
border-radius与圆角
【总结】ASP如何获取访客真实的IP地址
解决缩小图标变样问题
SQL 外链接操作小结 inner join left join right join
100％点击区的滑动门
30个最常用css选择器解析
弹出对话框,点击跳出一个可拖动的层(对话框)
ASP开发的WAP格式简易邮件系统实例
