具有相同宽度的浮动元素
我有三个div并且在第一个左边浮动.如果只有浮动元素设置了宽度,则另外两个将它环绕到右边.但是,如果我也为其他2个div设置了一个宽度,它们就不再包围第一个div,只是像正常的流式一样堆叠在下面.
我知道我需要将相同的浮点类添加到div 2和3以使它们浮动内联,但我很好奇为什么这个行为如果所有三个都有宽度(即使宽度加起来小于可用的宽度) broswer窗口宽度).这是代码:
<!DOCTYPE html>
<html>
<head>
<style>
.one {
background-color: steelblue;
padding: 10px;
width: 200px;
}
.two {
background-color: orange;
padding: 10px;
width: 200px;
}
.three {
background-color: red;
padding: 10px;
width: 200px;
}
.float {
float: left;
}
</style>
</head>
<body>
<div class="one float">
<p>I am paragraph one</p>
</div>
<div class="two">
<p>I am paragraph two</p>
</div>
<div class="three">
<p>I am paragraph three</p>
</div>
</body>
</html>
用几张照片可以最好地解释这一点.首先让我们摆脱你的第三个div,因为它真的不需要解释发生了什么.
当你浮动你的第一个div并且不给第二个div一个宽度时,你得到这个:
第一个(浮动的)div取自正常流并沿其容器的左侧放置,其中文本和内联元素将环绕它,因为浮动应该这样做.然后实际发生的是第二个div就像它放在第一个div后面,就像你在检查文档时看到的一样:
注意第二个div不是从第一个div的右边缘开始 - 它实际上存在于与第一个div相同的空间中(看起来好像它在它后面); 但是第二个div中的文本从第一个div结束的地方开始.然后第二个div继续占据其容器宽度的100%,因为它是块级元素.只有div中的文本被第一个浮动div操纵.
现在,如果我们在第二个div上设置宽度会发生什么？那么你得到以下内容:
所以问题是,为什么像设置第二个div上的宽度这样简单的东西似乎会使第一个div上的浮点规则无效？嗯,事实并非如此.这是正在发生的事情.就像在第一个例子中一样,第二个div似乎存在于第一个div之后,但是这次你明确地限制了文本必须存在的空间量.再次,如果我们突出显示文档中的第二个div,您将看到它占据的空间:
因为在这种情况下你明确地设置了200px的宽度,所以文本存在的浮动div的右边没有空格,所以它被推到浮动的div下面.这是一个可能使它更清晰的图像.假设我们将第二个div的宽度从200px增加到250px.然后我们得到这个:
现在第一个div的右边有空间,文本将从它旁边开始,一旦水平地用完房间,就会下降到它下面.继续增加第二个div的宽度,你最终会将两个div的文本水平相邻.
你想要从中得到的是,在第二个div上设置宽度不会杀死第一个div的浮动规则,它只会限制内容存在的空间量.