Html 并排使用浮子<；部门>；

我似乎在理解

float

属性方面有问题

<div style="background-color:green;width:40px;height:50px;float:left;"> test </div>
<div style="background-color:blue;width:50px;height:40px"> hello  </div>

测试
你好

---

我将第一个div浮动到左侧，第二个div应该在它旁边，但它正好位于它的顶部，顺便说一句，如果我将它添加到第二个

div
：
溢出：滚动
您将不得不将另一个div也浮动到左侧。如果同时浮动两个div，则Float可用于两个div。现在没有浮点数的div是一样的

因此：

测试
你好

这可能看起来很奇怪，但这就是css的工作原理。
添加一个float:left；你的第二个div也应该放在一起

<div style="background-color:green;width:40px;height:50px;float:left;"> test </div>
<div style="background-color:blue;width:50px;height:40px;float:left"> hello  </div>

测试
你好
通过添加
浮动：左到第二个div，我们可以解决这个问题。您还可以使用
float:right在第二个div上


你需要浮动两个div。仅浮动一个div会创建空间，其他元素可以围绕浮动的div进行环绕。在您的情况下，它看起来很奇怪，因为您已将宽度限制为非常窄。如果宽度更大，你会更清楚地理解我的意思。在图像周围有文字环绕的页面中，通常会看到这种情况。例如


请注意文本是如何环绕图像的。这正是您的文档发生的情况。
您必须将
float:left
属性赋予两个div，否则它将无法工作

您还可以应用
display:inline block
，它也会将2
div
s浮动到彼此相邻的位置

HTML

<div class='first'>First div</div>
<div>Second div</div>

这是怎么回事

考虑以下HTML代码段：

<h2>Default Behaviour</h2>
<div style="background-color:green;width:40px;height:50px;float:left;">test</div>
<div style="background-color:lightblue;width:50px;height:40px;">a a a a hello</div>

<br><br>
<h2>New Block Formatting Context</h2>
<div style="background-color:green;width:40px;height:50px;float:left;">test</div>
<div style="background-color:lightblue;width:50px;height:40px; overflow: auto;">a a a a hello</div>

默认行为
测试
你好



新块格式上下文
测试
你好

在第一种情况下，我添加了一些单字母单词来演示该行为。
CSS将非浮动元素放置在包含块的顶部和左侧，因为前一个元素是浮动的，因此不在常规内容流中

CSS然后将浮动元素放置在左上角（尽可能高），并开始围绕它包装流入内容。由于inflow
div
具有固定的宽度，因此内容被限制在右侧，如环绕浮动元素的单个字母所示

在第二种情况下，我通过分配
overflow:auto
（
scroll
也可以工作，
float
）来建立一个新的块格式上下文。在这种情况下，流入元素的左边缘放置在浮动元素的右侧，因此浮动元素周围没有文字环绕

请参见演示：

结果如下：

我不想要一个解决方案，我要求一个合理的解释：如果有足够的空间，第二个div的文本将放在第一个div的旁边，但您已将其宽度限制为50px。如果为第二个div指定了更大的宽度，或者将其向左浮动，则效果会更好。尝试在浮动上浮动：右：左元素非浮动块元素垂直堆叠，其左边缘接触视口的左边缘；因此，我建议尝试浮动汇率：对，谢谢！！，这是有道理的，但仍然很奇怪，因为有些时候浮动就足够了
div {
    float: left;
    width: 50px;
    background-color: blue;
}

.first {
    width: 40px;
    background-color: green;
}

<h2>Default Behaviour</h2>
<div style="background-color:green;width:40px;height:50px;float:left;">test</div>
<div style="background-color:lightblue;width:50px;height:40px;">a a a a hello</div>

<br><br>
<h2>New Block Formatting Context</h2>
<div style="background-color:green;width:40px;height:50px;float:left;">test</div>
<div style="background-color:lightblue;width:50px;height:40px; overflow: auto;">a a a a hello</div>