本文介绍如何在保持父元素 main 样式不变的前提下，使用 CSS float 配合 clear 实现子元素（如 #left 和 #right）分别左对齐和右对齐，并确保后续内容正常换行显示。
本文介绍如何在保持父元素 `main` 样式不变的前提下，使用 css `float` 配合 `clear` 实现子元素（如 `#left` 和 `#right`）分别左对齐和右对齐，并确保后续内容正常换行显示。
在给定 HTML 结构中，<main> 元素设置了固定宽度（400px）、居中显示（margin: auto）及居中文字对齐（text-align: center），但其内部两个 <span> 元素默认为行内元素、水平排列，无法直接靠左/右贴边对齐。若仅对 #left 和 #right 设置 float: left 与 float: right，虽能实现视觉上的左右定位，但会引发浮动带来的布局影响——后续的 <div> 会“环绕”浮动元素，而非自然换行显示在它们下方。
解决的关键在于清除浮动的影响：通过为紧跟在浮动元素之后的兄弟元素添加 clear: both，强制其脱离浮动流、从新行开始渲染。示例代码如下：
main {
width: 400px;
margin: auto;
border: 5px solid green;
text-align: center;
}
#left {
border: 5px solid red;
float: left; /* 左对齐父容器左侧 */
}
#right {
border: 5px solid blue;
float: right; /* 右对齐父容器右侧 */
}
/* 清除后续 div 的浮动影响，使其独占一行 */
#right + div {
clear: both;
}✅ 注意事项：
- #right + div 是相邻兄弟选择器，精准作用于紧随 #right 后的 <div>；若后续有多个非浮动块级元素，建议统一添加 clear: both 类（如 .clearfix），或改用更现代的方案（如 Flexbox）。
- float 虽兼容性极佳，但本质是为图文环绕设计，现代布局推荐优先使用 display: flex（例如给 main 设 display: flex; justify-content: space-between），但本题明确要求“不改变 main 的任何属性”，故 float + clear 是合规且有效的解决方案。
- 浮动元素会脱离文档流，若父容器高度塌陷（本例因有后续 div 占据高度而未显现），需额外处理；此处无需干预，因 main 内已有非浮动内容撑起高度。
综上，在约束条件下，float 配合精准的 clear 是简洁、可靠、语义清晰的实现方式。
