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

即使您正在清除那些浮动（清除：两者），最终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;
}

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

2 个答案: