當我沒有為第二個 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>