为什么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> &nbsp; <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里面)放置任何分割元素,比如边框等等。