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;

应用于#three div。甚至

padding-bottom: 20px;

应用于#two div。甚至

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

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

Answer 2

将float:left;应用于#three以解决您的问题

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

Answer 3

在包含overflow:hidden;的容器中包装#one和#two，您甚至不需要clearfix。

Demo

<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>

的 Live Demo 的

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;应用于#three div。

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

修改现在我看到你在clearfix之前错过了一个点。没关系。

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

6 个答案: