这是一个创建于 3802 天前的主题，其中的信息可能已经有所发展或是发生改变。
代码是这样:
<!DOCTYPE html>
<html>
<head>
<style>
#c1{background:red;height:80px;width:30px;float:left;}
#c2{margin:0px;background:dimgray;}
#c21,#c22,#c23,#c24,#c25{margin:10px;background:green;width:100px;height:30px;}
#c22,#c24{background:gold;}
</style>
</head>
<body>
<div id="c1"></div>
<div id="c2">
<div id="c21">Text 1</div>
<div id="c22">Text 2</div>
<div id="c23">Text 3</div>
<div id="c24">Text 4</div>
<div id="c25">Text 5</div>
</div>
</body>
</html>
此时的效果图是这样：
当我把#c2的margin改为30px时效果变成了这样：
#c2会影响前面的浮动元素#c1的定位？
求v2的前端工程师解答，前端菜鸟一枚，范了低级错误求轻喷
<!DOCTYPE html>
<html>
<head>
<style>
#c1{background:red;height:80px;width:30px;float:left;}
#c2{margin:0px;background:dimgray;}
#c21,#c22,#c23,#c24,#c25{margin:10px;background:green;width:100px;height:30px;}
#c22,#c24{background:gold;}
</style>
</head>
<body>
<div id="c1"></div>
<div id="c2">
<div id="c21">Text 1</div>
<div id="c22">Text 2</div>
<div id="c23">Text 3</div>
<div id="c24">Text 4</div>
<div id="c25">Text 5</div>
</div>
</body>
</html>
此时的效果图是这样：
当我把#c2的margin改为30px时效果变成了这样：
#c2会影响前面的浮动元素#c1的定位？
求v2的前端工程师解答，前端菜鸟一枚，范了低级错误求轻喷
 |
1
lijsh 2014-07-22 22:30:56 +08:00 via Android
看看body
|
 |
3
qiayue 2014-07-22 22:49:11 +08:00
c1 没变啊，是 c2 动了
|
 |
5
kamal 2014-07-22 22:55:27 +08:00  2
CSS 外边距(margin)重叠及防止方法
http://www.hujuntao.com/web/css/css-margin-overlap.html Collapsing margins http://www.w3.org/TR/CSS2/box.html#collapsing-margins 关于Block Formatting Context－－BFC和IE的hasLayout http://www.cnblogs.com/pigtail/archive/2013/01/23/2871627.html |
|
7
kamal 2014-07-22 22:57:14 +08:00
|
 |
8
Tonni 2014-07-22 23:03:51 +08:00
我最讨厌的就是写HTML和CSS代码了
|
 |
9
whrhw OP @kamal
恕我愚笨 这里： http://www.hujuntao.com/web/css/css-margin-overlap.html说： 相邻的盒模型中，如果其中的一个是浮动的（float），垂直margin不会重叠，并且浮动的盒模型和它的子元素之间也是这样。 还有这里： http://www.w3.org/TR/CSS2/box.html#collapsing-margins说： Margins between a floated box and any other box do not collapse (not even between a float and its in-flow children) 能否具体指出？ |
 |
10
wxt2005 2014-07-22 23:35:41 +08:00 1
我的理解是，div#c2的margin-top和body的margin-top融合变为了30px，所以导致在body中的div#c1也随之下降了30px。
不知道是否正确。 |
 |
13
yreenchan 2014-07-23 08:59:27 +08:00
如果第二个c2也加了左浮动，两个盒子就不会重叠在一起了
|
 |
18
un 2014-07-23 12:17:05 +08:00
这个 30px 就是 #c2 的，我觉得和 body 的 margin 没有关系。
|
|
20
wxt2005 2014-07-23 13:21:14 +08:00
@un http://www.w3school.com.cn/css/css_margin_collapsing.asp
"当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并。" |
Select Language