本文介绍在父容器宽度固定且不可修改的前提下，使用 CSS 浮动（float）配合清除浮动（clear）技术，精准控制子元素在父容器内的左右对齐布局，同时避免影响后续内容流排版。

本文介绍在父容器宽度固定且不可修改的前提下，使用 css 浮动（`float`）配合清除浮动（`clear`）技术，精准控制子元素在父容器内的左右对齐布局，同时避免影响后续内容流排版。

当父容器（如

）具有明确宽度（例如 width: 400px）且禁止修改其定位或显示模式时，直接使用 position: absolute 会脱离文档流、破坏居中效果；而 text-align 仅作用于内联内容的水平对齐，无法实现“左元素贴左、右元素贴右”的并列布局。此时，float 是兼容性好、语义清晰的解决方案。

关键在于：为 #left 设置 float: left，为 #right 设置 float: right，二者将分别紧贴父容器的左、右内边距对齐。但浮动会使后续块级元素（如

）的文字环绕浮动元素，造成布局错乱。因此必须显式清除浮动影响。

推荐使用 clear: both 应用于紧跟在浮动元素之后的第一个兄弟元素上（通过 + 相邻兄弟选择器精准定位）：

前端开发规范

企业级前端开发规范 Skill，包含命名、目录、CSS/JS/TS、Vue/React、Git、构建、性能、安全完整规范

下载

#left {
  border: 5px solid red;
  float: left;
}

#right {
  border: 5px solid blue;
  float: right;
}

/* 清除 #right 后紧邻的 div 的浮动影响 */
#right + div {
  clear: both;
}

⚠️ 注意事项：

• clear: both 表示该元素不允许其顶部与任何浮动元素的底部对齐，从而强制其从浮动元素下方开始布局；
• 若后续有多个非浮动元素，建议统一包裹在 div.clearfix 中并应用 clear: both，或对所有后续块级元素设置 clear: both；
• 现代开发中也可考虑 display: flex 或 grid 布局，但本例明确要求不修改 main 元素属性，故 float + clear 是最符合约束条件的方案；
• 所有浮动元素需确保父容器能正确计算高度（本例中因 main 有固定高度和边框，无塌陷风险；若内容高度动态，建议额外触发 BFC，如 overflow: hidden）。

综上，在受限条件下，float 配合精准的 clear 控制，是实现子元素相对于固定宽父容器左右锚定的稳健、可预测且广泛兼容的方法。