白话Block Formatting Contexts
一,啥是Block Formatting Contexts
当涉及到可视化布局的时候,Block Formatting Contexts提供了一个环境,HTML元素在这个环境中按照一定规则进行布局。一个环境中的元素不会影响到其它环境中的布局。
为了让我们有个感性的认识,举个不太合适的例子。你可以把一个页面想象成大的集装箱,这个集装箱里装的货物就是HTML元素。在现实生活中为了避免不同人的货物相互混淆,都是把货物打好包装再装入集装箱的。这样的话,无论你包装里面的货物怎么摆放,都不会影响到其他人的货物。那么这个包装就可以被想象成Block Formatting Contexts。
二,怎样才能形成Block Formatting Contexts
当一个HTML元素满足下面条件的任何一点,都可以产生Block Formatting Contexts
- float的值不为none。
- overflow的值不为visible。
- display的值为table-cell, table-caption, inline-block中的任何一个。
- position的值不为relative和static。
三,Block Formatting Contexts在生产中有什么作用
- Block Formatting Contexts可以阻止边距折叠(margin collapsing)。我们知道在一般情况下,两个上下相邻的盒子会折叠它们垂直方向接触到的边距,这种情况只会发生在同一个Block Formatting Contexts中。换句话说,在同一个布局环境中(Block Formatting Contexts)是边距折叠的必要条件。这也就是为什么浮动的元素和绝对定位元素不会发生边距折叠的原因(当然还有很多种情况也不会折叠)。
- Block Formatting Contexts可以自闭合浮动。考虑一下下面的例子(请用标准浏览器查看):
01
<!DOCTYPE html>
02
<
html
>
03
<
head
>
04
<
title
>Demo</
title
>
05
<
style
type
=
"text/css"
>
06
html, body {
07
margin: 0;
08
padding: 0;
09
}
10
#red, #orange, #yellow, #green {
11
width: 100px;
12
height: 100px;
13
float: left;
14
}
15
#red {
16
background: red;
17
}
18
#orange {
19
background: orange;
20
}
21
#yellow {
22
background: yellow;
23
}
24
#green {
25
background: green;
26
}
27
</
style
>
28
</
head
>
29
<
body
>
30
<
div
id
=
"c1"
>
31
<
div
id
=
"red"
></
div
>
32
<
div
id
=
"orange"
></
div
>
33
</
div
>
34
<
div
id
=
"c2"
>
35
<
div
id
=
"yellow"
></
div
>
36
<
div
id
=
"green"
></
div
>
37
</
div
>
38
</
body
>
39
</
html
>
在上面的代码本意是做一个两行两列的布局,但是由于#red, #orange, #yellow, #green这四个div同在一个布局环境中,即便通过#c1, #c2这两个div划分,浮动之后它们还会一个接着一个排列,并不会换行。我们要做的就是把这四个div两两划分到不同的布局环境之中,从而闭合浮动。通过上面的分析,让#c1形成新的Block Formatting Contexts就可以解决问题。
- Block Formatting Contexts可以阻止元素被浮动覆盖。请看示例:
01
<!DOCTYPE html>
02
<
html
>
03
<
head
>
04
<
title
>Demo</
title
>
05
<
style
type
=
"text/css"
>
06
html, body {
07
margin: 0;
08
padding: 0;
09
}
10
#left {
11
width: 100px;
12
height: 100px;
13
background: red;
14
float: left;
15
}
16
#right {
17
height: 200px;
18
background: yellow;
19
}
20
</
style
>
21
</
head
>
22
<
body
>
23
<
div
id
=
"left"
></
div
>
24
<
div
id
=
"right"
></
div
>
25
</
body
>
26
</
html
>
在标准浏览器下可以看到,普通的#right元素被浮动的#left元素所覆盖了。要想避免这种情况,有一种方法就是让#right形成新的Block Formatting Contexts。但是这里一定要注意的是,浮动不会覆盖的只是Block Formatting Contexts的border-box。换句话说,形成Block Formatting Contexts元素的margin还是会被浮动所覆盖掉的。
如果想全面了解Block Formatting Contexts,请看CSS 101: Block Formatting Contexts这篇文章。
建议继续学习:
- 瀑布流布局浅析 (阅读:5963)
- Android用户界面设计:表格布局 (阅读:4770)
- HTML页面布局基础 (阅读:3669)
- CSS的未来:明智的布局工具终于到来 (阅读:3119)
- 手机产品框架层设计: 两种主要的布局方式 (阅读:2433)
- 多栏自适应布局问题浅谈 (阅读:2205)
- Ext JS 4 布局和容器:Layouts、Containers (阅读:2171)
- 白话Block Formatting Context (阅读:1880)
- Android流式布局实现 (阅读:1625)
- 网页设计创新式布局与交互 (阅读:1487)
扫一扫订阅我的微信号:IT技术博客大学习
- 作者:robot 来源: UED TEAM
- 标签: 布局
- 发布时间:2010-06-24 09:42:50
- [69] 如何拿下简短的域名
- [67] Go Reflect 性能
- [63] Oracle MTS模式下 进程地址与会话信
- [60] IOS安全–浅谈关于IOS加固的几种方法
- [60] 【社会化设计】自我(self)部分――欢迎区
- [59] 图书馆的世界纪录
- [57] android 开发入门
- [55] 视觉调整-设计师 vs. 逻辑
- [48] 界面设计速成
- [47] 读书笔记-壹百度:百度十年千倍的29条法则