在浮动的div css下的margin-top

Question

我在浮动下有一个div：右边div。由于某种原因，上边距不能应用于第一个div。这是css

#over{
  width:80%;
  float:right;
  color:#e68200; 
 }

#under{
  clear:both;
  background:url(../images/anazitisi.png) no-repeat;  
  margin:10px auto; /*does not work!!!*/
  width:95px;
  height:20px;
 } 

有谁知道发生了什么事？

Answer 1

浮动的东西有点漂浮在正常的布局之外，所以一般不会影响其他没有浮动的东西。当然，不同浏览器中的浮动行为有所不同，但这是一般的想法。

在浮动的div之后你需要一些东西（比如一个空的div）来清除浮动（有style =“clear：both;”）。

然而，就像我说的那样，浏览器的行为仍然会有所不同，然后决定应该从哪个数据开始计算。当然有解决方法。 See this page for more on that.

Answer 2

没有额外<div>

的解决方案

你看到的是CSS3中collapsing vertical margins的问题。随着CSS4的出现，这个问题将更容易解决。与此同时，添加额外的<div>是一个好主意 ，这听起来很简单。通常最好将内容和演示文稿严格分开。

以下是我解决此问题的方法on my website。该解决方案利用内联块内没有垂直边缘坍塌。

#under至少应包含以下内容：

#under {
    clear: both;
    display: inline-block;
    width: 100%;
}

Answer 3

试试这个css snipe，我想这会解决你的问题。

  #over{
  width:80%;
  float:right;
  color:#e68200; 
  background-color:#234fdd;
  height:auto;
  margin-bottom:30px;
}

#under{
 clear:both;
 background:url(../images/anazitisi.png) no-repeat;  
 margin:auto;
 width:200px;
 height:20px;
 background-color:#23ffff;
}