浮动div css下的margin-top答案

【问题标题】：margin-top under a floated div css浮动div css下的margin-top
【发布时间】：2015-04-11 06:28:57
【问题描述】：

我在 float:right 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;
 }

有人知道怎么回事吗？

【问题讨论】：

标签： css margin

【解决方案1】：

浮动的东西有点脱离正常布局，所以一般不会影响其他不像它们那样浮动的东西。当然，不同浏览器中的浮动行为有所不同，但这是大体思路。

在浮动 div 之后，您需要一些可以清除浮动的东西（例如空 div）（具有 style="clear:both;"）。

但是，就像我说的那样，浏览器的行为仍然会有所不同，然后它决定应该从哪里计算边距。当然有解决方法。 See this page for more on that.

【讨论】：

【解决方案2】：

没有额外的解决方案`<div>`

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

这是我解决此问题的方法on my website。该解决方案利用了内联块内没有垂直边距折叠的情况。

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

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

【讨论】：

【解决方案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;
}

【讨论】：

没有额外的解决方案&lt;div&gt;

没有额外的解决方案`<div>`