html - 当我使用 clear :both 时，margin-top 不工作

Question

html,

<div id="content">
    <div id="left">left</div>
    <div id="right">right</div>
    <div id="bottom">bottom</div>    
</div>

CSS,

#content {
    border:1px solid black;
}
#content > div {
    height:100px;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
}
#left {
    float:left;
    width: 50%;
    border-right:1px solid black;
}
#right {
    float:right;
    width: 50%;
}
#bottom {
    border-top:1px solid black;
    clear: both;
    margin-top: 50px;
}

演示

http://jsfiddle.net/saBE2/1/

我想在底部div的左右div之后留出一些空间

但如果我使用 clear:both，margin-top 将不起作用。

有什么好主意吗？

Answer 1

清除左、右后的 float 。

尝试:

HTML:

<div id="content">
    <div id="left">left</div>
    <div id="right">right</div>
    <div class="clr"></div>
    <div id="bottom">bottom</div>
</div>

CSS:

#bottom {
    border-top:1px solid black;
    margin-top: 50px;
}
.clr{clear: both;}

Updated fiddle here.