当我使用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

左，右后清除漂浮物。

尝试：

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.

Answer 2

使用clear清除下面的填充物

的CSS

.clear{height:0px !important;clear:both;margin:0 !important;padding:0 !important;}

的HTML

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

Demo

Answer 3

我已更新你的小提琴jsfiddle.net/saBE2/5 /

问题是边缘看起来不正确，因为左边和右边的框底部没有任何边框，也尝试在左右框下放置边距。

#content {
border:1px solid black;
}
#content > div {

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

Answer 4

是的，你是对的clear:both;。这是因为clear:both使元素下降到文档中位于其前面的任何浮动元素之下。

但是如果你使用封面display:inline-block制作div width:100%。这需要保证金。

Try in fiddle

Answer 5

您需要执行以下操作：

1. 从左右div中删除float属性。
2. 向两者添加display：inline-block属性。

现在，将应用margin-top：50px的底部div。

此外，根据你想在这些div周围添加多少空间，调整两个div的宽度，使它们小于50％。