为什么当我没有为第二个 div 设置"float: left"时 div 会崩溃

Question

当我在代码中对两个div使用float:left时，它们工作得很好，但如果我从第二个div中删除float:left属性，那么两个div都会塌陷，使div#2文本不受干扰。我真的不明白为什么会发生这种事。非常感谢任何帮助

1(float：left--用于两个div：

div {
width: 250px;
height: 100px;
border: 5px solid black;
color: black;
font-weight: bold;
margin: 25px;
}
* {
margin: 0px;
}
div#d1 {
background-color: red;
vertical-align: top;
float: left;
text-align: center;
padding: 15px;
}
div#d2 {
float: left;
background-color: green;
padding: 25px 50px 6px 6px;
}

<div id="d1">
<p> DIV #1</p>
</div>
<div id="d2">
<p> DIV #2</p>
</div>

2(float:left——不用于第二个div:

div {
width: 250px;
height: 100px;
border: 5px solid black;
color: black;
font-weight: bold;
margin: 25px;
}
* {
margin: 0px;
}
div#d1 {
background-color: red;
vertical-align: top;
float: left;
text-align: center;
padding: 15px;
}
div#d2 {
/*float: left;*/
background-color: green;
padding: 25px 50px 6px 6px;
}

<div id="d1">
<p> DIV #1</p>
</div>
<div id="d2">
<p> DIV #2</p>
</div>

Answer 1

float属性从页面的正常流中删除元素。如果你在两个元素中使用它，那么这两个元素可以相邻，但是如果你只使用其中一个，那么另一个元素的位置将是默认的(左上角(，并且浮动元素将在一个单独的"上；层"；它漂浮在左边的地方。

https://developer.mozilla.org/en-US/docs/Web/CSS/float

Answer 2

float并非如您所暗示的那样用于将文本块并排放置。

典型的"浮动"情况是在(非浮动的(文本块内浮动图像，其中文本(即内容(将在图像周围浮动(取决于浮动设置，如果浮动元素未插入文本开头，则在图像的左右和上方浮动(。以下是这种情况的示例：

img {
float: left;
width: 240px;
height: auto;
margin-right: 6px;
margin-bottom: 6px;
}

<div>
<img src="https://picsum.photos/400/300">
<p>Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra
nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet
adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus
tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac,
enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum.</p>
</div>

回到您的问题：要将元素放置在彼此相邻的处，请使用display: inline-block并为所有这些元素定义width设置。

.textblock {
display: inline-block;
width: 250px;
border: 1px solid #ddd;
padding: 0 10px;
}
.t1 {
background: red;
}
.t2 {
background: green;
}

<div class="textblock t1">
<p>Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra
nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus.</p>
</div>
<div class="textblock t2">
<p>Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero
venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna.</p>
</div>