在浮动div和底部div之间放置一个空格

Question

我正在尝试在两个浮动div的底部创建一个div，但在底部div和其他div之间留有边距。

这是小提琴

HTML：

<html><head></head>
<body>
    <div class="left">Hello</div>
    <div class="right">Hello</div>
    <div class="bottom">Hello</div>

</body>
</html>

CSS：

.left {
    width: 150px;
    height: 100px;
    float: left;
    border: 1px solid #000;
}

.right {
    width: 150px;
    height: 100px;
    float: left;
    border: 1px solid #000;
}

.bottom {
    clear: both;
    margin-top: 20px;
}

Answer 1

使用一个清晰​​的类对我有用 （ Fiddle ）：

<html><head></head>
<body>
    <div class="left">Hello</div>
    <div class="right">Hello</div>
    <div class="clear"></div>
    <div class="bottom">Hello</div>
</body>
</html>​

.left {
    width: 150px;
    height: 100px;
    float: left;
    border: 1px solid #000;
}

.right {
    width: 150px;
    height: 100px;
    float: left;
    border: 1px solid #000;
}

.bottom {
    margin-top: 20px;
}

.clear {
    clear: both;
}

Answer 2

即使您正在清除这些浮点数（使用clear：全部），最后div的边距也不会使其远离它们。 实际上，该余量实际上隐藏在浮标后面。

试图通过引入一个额外的元素来解决此问题，这些元素可以是浮点数之后的空清除元素，也可以是围绕它们的包装器。

但是，为了保持标记尽可能整洁，通常只需要在浮点数上添加底边距即可。

因此，您必须将此边距定义为第一个div。 因此它将像这样工作：

CSS：

.left {
    width: 150px;
    height: 100px;
    float: left;
    border: 1px solid #000;
    margin-bottom: 20px;
}

.right {
    width: 150px;
    height: 100px;
    float: left;
    border: 1px solid #000;
}

.bottom {
    clear: both;
}