为何不给第二个div设置float:left时两个div会塌陷？

核心原因：浮动元素脱离文档流的特性 #

当你给第一个div设置float:left、第二个div不设置浮动时，会触发以下布局行为：

1. 浮动的#d1会脱离正常文档流，不再占据原本的空间，导致正常流中的#d2会移动到#d1原来的位置，两者的盒子发生重叠，视觉上看起来“塌陷”。
2. #d2的文本不受影响，是因为浏览器的文本环绕浮动元素规则：浮动元素不会覆盖正常流中的文本内容，文本会自动避开浮动元素，所以你能看到DIV #2的文本正常显示在#d1右侧，但#d2的背景、边框这些块级盒子已经被#d1覆盖了。

而两个div都设置float:left时，两者都脱离文档流，会按照浮动规则在同一行排列（宽度足够的情况下），不会互相覆盖，所以看起来正常。

解决方法 #

根据你的需求，有几种常见的处理方式：

1. 让#d2在#d1下方显示（清除浮动）

给#d2添加clear:left属性，强制它在左侧浮动元素的下方布局：

div#d2 {
  /*float: left;*/
  background-color: green;
  padding: 25px 50px 6px 6px;
  clear: left; /* 新增清除浮动 */
}

2. 让#d2与#d1并排（不使用float）

改用Flexbox布局替代浮动，更稳定且易维护：

/* 给父容器（比如body）添加Flex属性 */
body {
  display: flex;
  gap: 25px; /* 控制两个div的间距，替代margin */
  padding: 0 25px; /* 保留原有的侧边间距 */
}

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;
}

3. 让#d2的盒子不被#d1覆盖（触发BFC）

给#d2添加能触发BFC的属性，BFC会形成独立的布局上下文，不会被浮动元素覆盖：

div#d2 {
  /*float: left;*/
  background-color: green;
  padding: 25px 50px 6px 6px;
  overflow: hidden; /* 触发BFC，或者用 display: flow-root; */
}

内容的提问来源于stack exchange，提问作者World Producer