如何实现左侧多div、右侧单个侧边栏div并排显示？

这种情况我太熟了！用float的时候经常踩这个坑，主要原因要么是左侧元素的总宽度把容器占满了，要么是浮动元素的布局规则没搞对。给你几个靠谱的解决办法：

如果一定要用float，得注意两个关键点：

1. 侧边栏要放在左侧元素的前面（浮动元素会优先占据对应方向的空间）
2. 左侧元素和侧边栏的总宽度不能超过父容器宽度

示例代码：

<div class="container">
  <!-- 侧边栏放前面！ -->
  <div class="sidebar">右侧侧边栏</div>
  <div class="left-item">左侧div1</div>
  <div class="left-item">左侧div2</div>
  <div class="left-item">左侧div3</div>
</div>

.container {
  width: 100%;
  overflow: hidden; /* 清除浮动，避免父容器高度塌陷 */
}
.sidebar {
  float: right;
  width: 250px; /* 给侧边栏设固定宽度 */
  background: #f0f0f0;
}
.left-item {
  float: left;
  width: calc(100% - 270px); /* 总宽度减去侧边栏宽度+间距 */
  margin-bottom: 10px;
  background: #e0e0e0;
}

现在没人还纠结float的各种坑了，Flex布局几行代码就能完美解决：

<div class="container">
  <div class="left-group">
    <div class="left-item">左侧div1</div>
    <div class="left-item">左侧div2</div>
    <div class="left-item">左侧div3</div>
  </div>
  <div class="sidebar">右侧侧边栏</div>
</div>

.container {
  display: flex;
  gap: 20px; /* 左右模块的间距，比margin更方便 */
}
.left-group {
  flex: 1; /* 让左侧容器自动占满剩余空间 */
}
.sidebar {
  width: 250px; /* 侧边栏固定宽度 */
  background: #f0f0f0;
}
.left-item {
  margin-bottom: 10px;
  background: #e0e0e0;
}

Flex布局下子元素默认横向排列，不用管浮动的规则，还能轻松处理响应式，调整起来特别灵活。

如果以后需要更复杂的布局，Grid也是绝佳选择，写法非常直观：

.container {
  display: grid;
  grid-template-columns: 1fr 250px; /* 第一列占满剩余空间，第二列固定250px */
  gap: 20px;
}

HTML结构和Flex方案一致，Grid直接定义列的宽度规则，布局逻辑一目了然。

总结一下：优先用Flex或Grid布局，float现在只适合简单的文字环绕场景，新的CSS布局方式能帮你避开很多奇怪的兼容性和布局问题。

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