|
举个实际当中的常见例子，比如垂直边距叠加问题：
代码:
<html>
<head></head>
<body>
<div id="A" style="background:gray;margin-top:20px;">
<div id="B" style="margin-top:10px;">
我有10px m-t
</div>
</div>
</body>
</html>
如果在现代的浏览器里运行，那么 B 的10px上边距将会和父元素 A 的20px上边距重叠起来，从而看起来就好像 B 没有上边距一样。就像前面说的那样，同一个 block formatting context 中的垂直边界将被重叠。那么不同 block formatting context 呢？
这种情况，如果不想加边框( border:1px solid transparent; )解决的话，那么就需要 A 建立一个新的 block formatting context 将 B 包裹起来，那么 A 的上边距和 B 的上边距就毫不相干了。可以用浮动，也可以加 overflow ，这要看具体情况。
代码:
<html>
<head></head>
<body>
<div id="A" style="background:gray;margin-top:20px;overflow:auto;">
<div id="B" style="margin-top:10px;">
我有10px m-t
</div>
</div>
</body>
</html>
再一个例子，回头看下上面过程里这样的一句：除非创建一个新的 block formatting context ，否则块级元素的布局不受浮动元素的影响。
这是造成元素重叠的原因。比如下面的代码：
代码:
<html>
<head></head>
<body>
<div id="A" style="background:gray;overflow:auto;">
<div id="B" style="background:green;margin:10px 10px 0 0;float:right;">
浮动元素m_10_10_0_0
</div>
<div id="C" style="background:red;">
普通流块
</div>
</div>
</body>
</html>
普通流块 C 在容器 A 里排布的时候，并不受浮动元素的影响，甚至当浮动元素 B 不存在。但是如果 C 创建了新的 block formatting context ，那么，普通流块c就会像 line box 一样受到浮动元素存在的影响而缩小。
代码:
<html>
<head></head>
<body>
<div id="A" style="background:gray;overflow:auto;">
<div id="B" style="background:green;margin:10px 10px 0 0;float:right;">
浮动元素m_10_10_0_0
</div>
<div id="C" style="background:red;overflow:auto;">
普通流块
</div>
</div>
</body>
</html>
关于浮动和 block formatting context ，brunildo.org 上有一份不错的参考。
说了这么多了，其实概念仍然可以很简单。普通流仅仅只是一种定位的机制。而flow本身在标准里也可以作为一个动词，就如同按顺序一个个的拿出HTML元素然后放到页面上一般。只是要注意一下 formatting context 的概念，特别是 block formatting context ，因为其影响更大(包括边距重叠、浮动清除、元素重叠等)。
写到这里也就差不多了，由于水平所限，如文中有不当之处，请指点下，非常感谢。谢谢阅读
经典论坛交流：http://bbs.blueidea.com/thread-2994612-1-1.html
本文链接：http://www.blueidea.com/tech/web/2010/7875.asp 
出处：蓝色理想
责任编辑：bluehearts
上一页 CSS定位机制之一:普通流 [2] 下一页
◎进入论坛网页制作、WEB标准化版块参加讨论，我还想发表评论。
|
第 1 页 
第 3 页 CSS定位机制之一:普通流 [3]
