子div的margin属性影响到父div的定位

来源：互联网发布：当前世界危机知乎编辑：程序博客网时间：2024/05/18 23:55

如下形式：

<syle>  .wrap{  margin: 0 auto ;  background:#ccc ;  }  .child{  margin-top : 20px ;  }</style>

<div class="wrap">  <div class="child">该div将影响父层div的margin属性</div></div>

最后的结果是，child div 会使得 wrap div margin-top 20 px。

网上搜了下，解决办法是：在wrap中添加overflow:hidden ;

前面有篇文章提到，如果一个div内部元素全部为浮动，那么该div 高度为0 ；

解决办法是添加一个空的clear：both 的div，也可以是加上overflow:hidden，不过据文章说在IE6 下不行，由于没有IE6，故无法测试。

感觉overflow：hidden这个属性影响的东西都挺奇怪的呢

-----------------------------------------------------------------------------

以上问题又找到标准解释了

@ 海玉的博客
本文地址: http://www.hicss.net/do-not-tell-me-you-understand-margin/

-----------------------------------------------------------------------------

垂直外边距合并问题

别被上面这个名词给吓倒了，简单地说，外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。你可以查看W3Shool CSS外边距合并了解这个基本知识。

实际工作中，垂直外边距合并问题常见于第一个子元素的margin-top会顶开父元素与父元素相邻元素的间距，而且只在标准浏览器下(FirfFox、Chrome、Opera、Sarfi)产生问题，IE下反而表现良好。例子可以查看下面代码(IE下表现“正常”，标准浏览器下查看出现“bug”)：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title>垂直外边距合并</title>
<style>
.top{width:160px; height:50px; background:#ccf;}
.middle{width:160px; background:#cfc;}
.middle .firstChild{margin-top:20px;}
</style>
</head>
 
<body>
<divclass="top"></div>
<divclass="middle">
  <divclass="firstChild">我其实只是想和我的父元素隔开点距离。</div>
  <divclass="secondChild"></div>
</div>
</body>
</html>

如果按照CSS规范，IE的“良好表现”其实是一个错误的表现，因为IE的hasLayout渲染导致了这个“表现良好”的外观。而其他标准浏览器则会表现出“有问题”的外观。好了，如果你读过了上面W3Shcool的CSS外边距合并的文章后，就很容易讨论这个问题了。这个问题发生的原因是根据规范，一个盒子如果没有上补白(padding-top)和上边框(border-top)，那么这个盒子的上边距会和其内部文档流中的第一个子元素的上边距重叠。

再说了白点就是：父元素的第一个子元素的上边距margin-top如果碰不到有效的border或者padding.就会不断一层一层的找自己“领导”(父元素，祖先元素)的麻烦。只要给领导设置个有效的 border或者padding就可以有效的管制这个目无领导的margin防止它越级，假传圣旨，把自己的margin当领导的margin执行。
对于垂直外边距合并的解决方案上面已经解释了，为父元素例子中的middle元素增加一个border-top或者padding-top即可解决这个问题。

------------------------------------------------------------