我有一个包含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>
您已正确找出问题所在。float<div>不再用于计算顶部边距,因此2<div>只是彼此对接。一种简单的解决方法是包装第二个<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>