Question

我是CSS新手。请帮助确认我的理解是否正确。我有两个块元素：第一个是浮动，第二个不是。使用如下所有设置，我的结果布局是否正确显示一行中彼此相邻的两个街区？我的理解是从第一个块开始浮动到左边，但第二个不是，所以后者应该保持在它最初定位的同一条线上并且环绕。

#box1{
    float:left;
    width: 200px;
    background-color: purple;
}

#box2{
    width:250px;
    background-color: orange;
}

<div id="box1">box 1</div>
<div id="box2">box 2</div>

Answer 1

只要两个盒子周围的容器足够大，是的，盒子1将位于容器的左边缘，另外200个像素位于盒子2（本身缩短为50个像素。请参阅here。

如果框2变大（由于内容更多），它将如下所示：

+-------+----------+
| box 1 |  box 2   |
+-------+          |
|                  |
+-------+----------+

Answer 2

你是对的。你可以在这里看到更清晰的行为 - http://jsfiddle.net/spacebeers/KvrHw/2/

如果您向第二个框添加更多内容，它将向左对齐并在浮动框下方。

两个相邻块的浮动行为

2 个答案: