分类分类
关注+2010-11-25作者：iifksp
举个实际当中的常见例子，比如垂直边距叠加问题：
代码：
<html>
<head></head>
<body>
<div id=“A”style=“background:gray;margin-top:20px;”>
<div id=“B”style=“margin-top:10px;”>
我有10pxm-t</div>
</div>
</body>
</html>
如果在现代的浏览器里运行，那么B的10px上边距将会和父元素A的20px上边距重叠起来，从而看起来就好像B没有上边距一样。就像前面说的那样，同一个blockformattingcontext中的垂直边界将被重叠。那么不同blockformattingcontext呢？
这种情况，如果不想加边框（border:1pxsolidtransparent;）解决的话，那么就需要A建立一个新的blockformattingcontext将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;”>
我有10pxm-t</div>
</div>
</body>
</html>
再一个例子，回头看下上面过程里这样的一句：除非创建一个新的blockformattingcontext,否则块级元素的布局不受浮动元素的影响。
相关文章
更多+相同厂商
热门推荐
点击查看更多
点击查看更多
点击查看更多
说两句网友评论