我有一个包含2个div的页面。第一个浮动。第二个有一个“清晰：两个”CSS声明和一个大的上边距。但是，当我在Firefox或IE8中查看页面时，我没有看到上边距。看起来第二个div正在触及第一个div而不是被分开。有没有办法让最高保证金正常运作？
我已经阅读了CSS规范并注意到它说“由于浮动不在流中，浮动框之前和之后创建的非定位块框垂直流动，就像浮动不存在一样。”。但是，我不知道该怎么做。
以下是一个例子：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>CSS test</title>
</head>
<body>
<div style="float: left; border: solid red 1px">foo</div>
<div style="clear: both; margin-top: 90px; border: solid red 1px">This div should not touch the other div.</div>
</body>
</html>
答案 0 :(得分：33)
您已正确识别问题。浮动的<div>不再用于计算上边距，因此2 <div>只是相互对接。解决这个问题的一个简单方法就是包装第二个<div>。这将允许包装器（无形地）与第一个<div>对接，并允许您为其指定空白区域。
让包装器正常工作的技巧是使空白区域成为内部空白区域。换句话说，包装器使用填充而不是边距。这意味着在包装器外面发生的任何事情（就像其他浮动元素一样）并不重要。
<div style="float: left; border: solid red 1px">foo</div>
<div class="wrapper" style="clear: both; padding-top: 90px;">
<div style="border: solid red 1px">This div should not touch the other div.</div>
</div>
答案 1 :(得分：20)
你可以在它们之间添加一个div
<div style="float: left; border: solid red 1px">foo</div>
<div style="clear:both;"></div>
<div style="margin-top: 90px; border: solid red 1px">This div should not touch the other div.</div>
这应该照顾它。
很多WordPress主题（而不仅仅是）采用这种技术
答案 2 :(得分：8)
答案 3 :(得分：6)
<div> 另一个答案几乎是正确的，但错过了width: 100%。这是更正后的版本。
h1 {
clear: both;
display: inline-block;
width: 100%;
}
没有此width: 100%的清除要求浮动元素位于标记为off的容器中，或者需要额外的，语义上为空的<div>。相反，严格分离内容和标记需要一个严格的CSS解决方案来解决这个问题，即没有任何额外的非语义HTML。
仅仅需要标记浮动结束的事实，不允许unattended typesetting。
如果后者是你的目标，浮动应该保持打开状态（段落，有序和无序列表等）以包裹它，直到遇到清除。在上面的示例中，clear由新标题设置。
此解决方案在my website上得到广泛使用，以解决浮动缩小版旁边的文本较短且下一个清算对象的上边距未得到遵守时的问题。它还可以在从站点自动生成PDFs时阻止任何手动干预。
答案 4 :(得分：4)
在第二个div上设置“float：left”
答案 5 :(得分：3)
问题是第二个div只能计算非浮动元素的边距。在尝试设置边距之前，需要添加任何非浮动元素。浮动div之外和第二个div之前的非中断空格或换行符将起作用。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>CSS test</title>
</head>
<body>
<div style="float: left; border: solid red 1px; height:40px;">foo</div>
<div style="clear: both; margin-top: 90px; border: solid red 1px">This div should not touch the other div.</div>
</body>
</html>
答案 6 :(得分：1)
最简单的方法是垂直分隔div而不添加额外的HTML：使用边距而不是非浮动div设置浮动div的样式：
y
不能使用margin属性相对于浮动框垂直定位块框，但是浮动框可以相对于块框定位。
答案 7 :(得分：0)
另一种方法是在最后一个浮动的div之后添加一个清空的空段落。
<p style="clear:both"></p>
答案 8 :(得分：0)
将这个添加到浮动div下方，并在您想要向下推的页面上方添加：
<div class="clearfix"></div>
然后在你的css文件中添加：
.clearfix {clear: both;}
这实际上创建了一个不可见的元素，你的第二个div的边缘可以反应 - 这是我在许多Wordpress网站上看到的。它还有一个好处，就是在某个地方（即在clearfix div中）放置任何分隔元素，如边框等。