CSS中浮动元素下方的margin-top问题

Question

我有一个div在float:right的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;
 } 

有人知道发生了什么事吗？

- pavlos

Answer 1

浮动的元素会脱离正常布局，因此通常不会影响其他未浮动的元素。当然，不同浏览器中的浮动行为不同，但这是一般想法。

在浮动的div后面，您需要添加一些内容（如空的div），以清除浮动（具有style="clear:both;"）。

但是，正如我所说，浏览器行为仍然会有所不同，它决定从哪里开始计算边距。当然，有解决方法。请参见此页面了解更多信息。

- themightyjon

Answer 2

不需要额外的<div>的解决方案

你所看到的，是CSS3中崩溃垂直边距的问题。这个问题在CSS4的出现后会更容易解决。在此期间，添加额外的<div>并不是一个好主意，尽管听起来很简单。通常最好严格分离内容和表现。

以下是我如何在我的网站上解决这个问题的。该解决方案利用了内联块中不存在垂直边距折叠的特性。

#under至少应包含以下项目：

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

- Serge Stroobandt

Answer 3

尝试使用这段CSS代码，我认为这可以解决你的问题。

  #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;
} 

- Jaison Justus