本文介绍使用 CSS Flexbox 将两个容器（如侧边栏和主内容区）水平并排布局的正确方法，解决传统 float 带来的清除浮动、高度塌陷及响应性差等问题。
本文介绍使用 css flexbox 将两个容器（如侧边栏和主内容区）水平并排布局的正确方法，解决传统 `float` 带来的清除浮动、高度塌陷及响应性差等问题。
在网页布局中，实现两个盒子（例如 .sidebar 和 .meat）并排显示是常见需求。但原代码中依赖 float: left 的方式存在明显缺陷：浮动元素会脱离文档流，导致父容器 .plate 高度塌陷；同时 width: 30% + 90% 在同一行无法共存（总和超 100%），且未设置 display: flex，使 align-items 等属性无效。
✅ 推荐方案：使用现代 CSS Flexbox
只需为父容器 #plate 添加 display: flex，即可启用弹性布局，并通过子元素宽度控制比例：
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#plate {
height: 100%;
width: 750px;
margin: 10px auto;
display: flex; /* 启用 Flex 布局 —— 关键一步 */
gap: 10px; /* 可选：添加间距，替代手动 margin */
}
.sidebar {
border-radius: 25px;
background: rgba(214, 245, 245, 0.7);
text-align: center;
width: 30%; /* 占据 30% 宽度 */
padding: 10px;
border: 15px solid transparent; /* 修正：border 需指定样式（如 solid） */
}
.meat {
border-radius: 25px;
background: rgba(242, 217, 230, 0.7);
width: 70%; /* 剩余宽度，与 sidebar 合计 100% */
padding: 10px;
border: 15px solid transparent;
}
? 注意事项：
-
float在 Flex 容器内自动失效，无需也不应再写float: left； -
border: 15px是不完整声明，必须补充border-style（如solid、dashed），否则无效； - 若需垂直居中内容，可在
#plate中添加align-items: center； - 如需响应式适配小屏幕，可结合
flex-direction: column和媒体查询。
? 总结：Flexbox 是目前最可靠、语义清晰且易于维护的并排布局方案。相比浮动或绝对定位，它天然支持对齐、分布、伸缩与响应式行为，应作为现代布局的首选。
