Question

我有这个示例代码：

<html>
<head>
</head>
<body>
<div style="float:left;" id="1">
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>
<div style="border:1px solid black;" id="2">
bbbbbbbbbbbbbbbbbbbbbbbbbbb
</div>
</body>
</html>

div 2的内容位于div 1（精细）内容的左侧，但div 2的边框包含div 1.这种情况发生在所有经过测试的浏览器中（Firefox 26.0和IE8）。

Demo

你能解释一下发生了什么吗？

Answer 1

因为您没有浮动其他div - Demo

由于它没有浮动，它将占用整个水平空间，也不会因为你没有清除你的花车而向下移动。

所以会发生什么是浮动的div只是坐在左边，使你的非浮动div环绕它..

如果您在标记中移动div的顺序，您就会理解我的意思 - Demo因此，正如您所见，顶部div占用了所有可用的水平空间，而另一个div位于左侧，不会占据整个水平空间，因为它浮动到左侧，所以因为你有浮动的div第一个而下一个是非浮动的div它将占用100%空格，但会将浮动div包裹起来，因为您尚未清除它，因此您应该float下一个div。

使用display: inline-block;也可以达到同样的效果。

有关浮点数如何工作的详细信息，请参阅我的回答here

<div style="float:left;" id="1">
    aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>
<div style="border:1px solid black; float: left;" id="2">
    bbbbbbbbbbbbbbbbbbbbbbbbbbb
</div>

奇怪的行为div和float：left

1 个答案: