Question

我有三个div并且在第一个左边浮动。如果只有浮动元素设置了宽度，则另外两个将它环绕到右边。但是如果我为其他2个div设置了一个宽度，它们就不再包围第一个div，只是像正常的流式一样在下面叠加。

我知道我需要将相同的float类添加到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>

Answer 1

最好用几张照片解释。首先让我们摆脱你的第三个div，因为它不需要解释发生了什么。

当你浮动你的第一个div并且不给第二个div一个宽度时，你得到这个：

enter image description here

第一个（浮动的）div从正常流中取出并放在其容器的左侧，文本和内联元素将围绕它放置，因为浮动应该这样做。然后实际发生的是第二个div就像它放在第一个div后面那样，当你检查文档时可以看到：

enter image description here

注意第二个div不是从第一个div的右边缘开始 - 它实际上存在于与第一个div相同的空间中（看起来好像它在它后面）;但是第二个div中的文本从第一个div结束的地方开始。然后第二个div继续占据其容器宽度的100％，因为它是块级元素。只有div中的文本被第一个浮动div操纵。

现在，如果我们在第二个div上设置宽度会发生什么？那么你得到以下内容：

enter image description here

所以问题是，为什么在第二个div上设置宽度这么简单的东西似乎会使第一个div上的浮点规则无效？嗯，事实并非如此。这是正在发生的事情。就像在第一个例子中一样，第二个div似乎存在于第一个div之后，但是这次你明确地限制了文本必须存在的空间量。再次，如果我们突出显示文档中的第二个div，您将看到它占据的空间：

enter image description here

因为在这种情况下你明确地设置了200px的宽度，所以文本存在的浮动div的右边没有空格，所以它被推到浮动的div下面。这是一个可能使它更清晰的图像。假设我们将第二个div的宽度从200px增加到250px。然后我们得到这个：

enter image description here

现在第一个div的右侧有空间，文本将从它旁边开始，一旦水平地用完房间，就会下降到它下面。继续增加第二个div的宽度，你最终将两个div的文本水平相邻。

你想要从中获取的是，在第二个div上设置宽度不会杀死第一个div的浮动规则，它只会限制内容存在的空间量。

Answer 2

要消除你的好奇心...... div默认为阻止等级元素......因为你在{1}之后没有clear编辑float阻止，他们仍然在容器上有效果 ....

并且由于block-level-elements占据了整个宽度，并且float效果仍然存在，所以你可以将它们包裹在浮动的div中......

clear div，您会看到不同的版本 quench your curiosity here

Answer 3

你可以做到

div {
    display: inline-block;
}

目前它们默认为显示块。并且块的默认宽度为100％，这就是它们出现在彼此之下的原因

具有相同宽度的浮动元素

3 个答案: