当我没有为第二个 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）浮动：左---不用于第二个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 属性将元素从页面的正常流程中移除。 如果你在两个元素中使用它，那么这两个元素可以彼此相邻，但是如果你只使用其中一个，那么另一个元素 position 将是默认的（左上角），浮动元素将在单独的“层”漂浮在左边。

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>