Question

我有点困惑。这是一个小网页。主要有两个div：s和topBlock 首先包含一个图像。问题是firebug显示div＃top的高度等于0，因此下一个div mainBlock向上移动。如果我要删除这段代码：

div#logo{
    float: left;
}

一切都将开始正常工作，div＃mainBlock将低于div＃top。请你解释一下它的工作原理以及如何以正确的方式避免这种情况？

这是我的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Paralab - Website &amp; interface design, web apps development, usability</title>
<style text="text/css">
html, body{
}
div#logo{
    float: left;
}
#top{
  width: 100%;
}
#mainBlock{
  width:100%;
}
</style>
</head>
<body>
    <div id="top">
        <div id="logo">
            <img alt="logo"  src="img/logo.png" />
        </div>
    </div>
    <div id="mainBlock">
        Contact Us
    </div>
</body>
</html>

Answer 1

因为它是浮动的 - 将clear:left;添加到您的mainBlock类。

http://jsfiddle.net/XEaBT/

Answer 2

你需要清理你的漂浮物。有几种方法可以执行此操作，我可以查看此article on QuirksMode about clearing floats以获取更多信息。

Answer 3

浮动图像离开文档流。设置#top {overflow：hidden;}

Answer 4

我强烈建议您使用严格的doctype而不是过渡。您将在浏览器中获得更一致的行为。

奇怪的布局行为

4 个答案: