html - 清除时 margin-top 不起作用：两者都使用

Question

正如您从我clear:both用来允许我放置#three的代码中看到的那样，#one #two但这似乎阻止了我添加margin-top到#three是否有解决此问题的方法？

<div id="one">
</div>
<div id="two">
</div>
<div id="three" class="clearfix">
</div>

#one {
    float:left;
}

#two {
    float:right;
}

.clearfix {
    clear:both;
}

#three {
    margin-top: 20px;
}

Answer 1

作为一种解决方法，您可以使用

padding-top : 20px 

或者您也可以在技术上使用

position: relative;
top: 20px;

应用于#threediv。甚至

padding-bottom: 20px;

应用于#twodiv。乃至

 #two:after {
    content : "";
    clear   : both;
    display : block;
    height  : 20px; // or margin-bottom: 20px;
 }

只需选择最适合您的布局的选项

Answer 2

申请float:left;#three 来解决您的问题

编辑：如果您不想浮动任何东西，但不需要使用相对定位，请按照 Fabrizio 并添加填充。

Answer 3

用 将 #one 和 #two 包装在一个容器中overflow:hidden;，您甚至不需要 clearfix。

演示

---

<div id="container">
<div id="one"></div>
<div id="two"></div>
</div>
<div id="three"></div>

#container {
    overflow:hidden;
}
#one {
    float:left;
}
#two {
    float:right;
}
#three {
    margin-top: 20px;
}​

Answer 4

嗨，现在更改您的 html 中的一些代码并执行此操作

<div style='overflow:hidden'>
  <div id="one">Left</div>
  <div id="two">Right</div>
</div>
<div id="three" class="clearfix">// your data </div>

现场演示

Answer 5

这个JSFiddle应该可以帮助你

<div class="row">
    <div id="one">
        a
    </div>
    <div id="two">
        b
    </div>
</div>

<div id="three">
    c
</div>

CSS

#one {
    float:left;
}    
#two {
    float:right;
}    
clearfix {
    clear:both;
}
.row{ overflow: hidden; border: 1px solid red; }
#three {
    margin-top: 40px;  border: 1px solid green;
}

Answer 6

您需要将 应用于clear: both;div #three。

然后它会是这样的：http: //jsfiddle.net/uJBK2/

编辑 现在我看到你在 clearfix 之前错过了一点。没关系。