Question

为什么IE7中的2个框并排，而“b”在其他浏览器的“a”下面（应该在哪里）？

<html>
<head>
<style type="text/css">
.a { float:left; width:100px; height:50px; background-color:#CCC; }
.b { width:75px; height:75px; background-color:#F00; }
</style>
</head>

<body>
  <div class="a">a</div>
  <div class="b">b</div>
</body>
</html>

使用try-it编辑器进行实时预览（复制粘贴我的代码）：http://www.w3schools.com/css/tryit.asp?filename=trycss_float4

编辑：我想在IE上修复它，所以它与FF，Chrome，Safari等完全相同

由于

Answer 1

了解The IE Float Model Problem

Answer 2

将clear添加到b以强制它显示在所有浏览器的a下：

.b { clear: both; width:75px; height:75px; background-color:#F00; }

Answer 3

如果你想要下面的元素，为什么甚至使用浮动？请改用display:block，还是忽视某些事情？

在浏览器上的浮动左元素之后的DIV出现在该元素之后（不在下面）

3 个答案: