为什么html元素的上边距会在浮动元素之后被忽略？
我有一个2 div的页面。 第一个是浮动的。 第二个有一个“明确的：既CSS”的声明和一个大的优势。 但是，当我在Firefox或IE8中查看页面时，我没有看到顶部边距。 它看起来像第二个div触摸第一个div，而不是分开。 有没有办法使顶部边距正常工作？
我已经阅读了CSS规范，并注意到它说：“由于浮动不在stream中，浮动框之前和之后创build的非定位块框垂直stream动，就好像浮动不存在一样”。 但是，我不知道该怎么做。
这里是一个例子：
<!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> 你已经正确地确定了这个问题。 浮动的<div>不再用于计算顶部边距，因此2 <div>只是相互对立。 解决这个问题的一个简单的方法就是包装2nd <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>
你可以简单地在他们之间添加一个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的主题（而不仅仅是）使用这种技术
在第二个div：
float: none; display: inline-block;
浏览器的兼容性表格： http ： //caniuse.com/#feat=inline-block
一个开放式的清晰; 没有容器，也没有额外的<div>
另一个答案几乎是正确的，但错过了一个width: 100% 。 这是正确的版本。
h1 { clear: both; display: inline-block; width: 100%; }
清除没有这个width: 100%要么浮动元素是在一个很好的标记容器或需要额外的，语义上空的<div> 。 相反，对内容和标记进行严格的分离需要严格的CSS解决scheme来解决这个问题，即不需要任何额外的非语义HTML。
仅仅需要标记一个浮点数的事实是不允许无人值守排版的 。
如果后者是你的目标，浮动应该保持开放的任何东西（段落，有序列表和无序列表等）环绕它，直到遇到一个明确的。 在上面的例子中，清除由一个新的标题设置。
这个解决scheme在我的网站上得到了广泛的使用，以解决浮动微缩文本旁边的文本短，下一个清除对象的顶边不被尊重的问题。 当从站点自动生成PDF时，还可以防止任何手动干预。
在第二个div上设置“float：left”
问题是第二个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>
另一种方法是在最后一个浮动div之后添加一个清空的段落。
<p style="clear:both"></p>
在浮动的div下面添加这个，并且在你想要下载的页面之上：
<div class="clearfix"></div>
然后在你的css文件中添加：
.clearfix {clear: both;}
这实际上创造了一个看不见的元素，你的第二个div的边缘可以反应 – 这是我见过的一些Wordpress网站上的东西。 它还有一个好处，就是给你一些地方（即在clearfix div里面）放置任何分割元素，比如边框等等。
