分类分类
关注+2010-11-25作者：iifksp
这是造成元素重叠的原因。比如下面的代码：
代码：
<html>
<head></head>
<body>
<div id=“A”style=“background:gray;overflow:auto;”>
<div id=“B”style=“background:green;margin:10px10px00;float:right;”>
浮动元素m_10_10_0_0</div>
<div id=“C”style=“background:red;”>
普通流块</div>
</div>
</body>
</html>
普通流块C在容器A里排布的时候，并不受浮动元素的影响，甚至当浮动元素B不存在。但是如果C创建了新的blockformattingcontext,那么，普通流块c就会像linebox一样受到浮动元素存在的影响而缩小。
代码：
<html>
<head></head>
<body>
<div id=“A”style=“background:gray;overflow:auto;”>
<div id=“B”style=“background:green;margin:10px10px00;float:right;”>
浮动元素m_10_10_0_0</div>
<div id=“C”style=“background:red;overflow:auto;”>
普通流块</div>
</div>
</body>
</html>
关于浮动和blockformattingcontext,brunildo.org上有一份不错的参考。
说了这么多了，其实概念仍然可以很简单。普通流仅仅只是一种定位的机制。而flow本身在标准里也可以作为一个动词，就如同按顺序一个个的拿出HTML元素然后放到页面上一般。只是要注意一下formattingcontext的概念，特别是blockformattingcontext,因为其影响更大（包括边距重叠、浮动清除、元素重叠等）。
写到这里也就差不多了，由于水平所限，如文中有不当之处，请指点下，非常感谢。
相关文章
更多+相同厂商
热门推荐
点击查看更多
点击查看更多
点击查看更多
说两句网友评论