可行但需确保同层浮动且父容器包裹，推荐用display: flow-root清除浮动或直接使用flex布局。
直接让左侧元素 float: left、右侧元素 float: right 是可行的，但必须注意：两个浮动元素需在**同一文档流层级**，且父容器要能“包裹住”它们（否则高度塌陷），否则布局会错乱或重叠。
基础写法（需清除浮动）
HTML 结构要简洁，左右元素并列放在同一个父容器内：
<div class="container"> <div class="left">左侧内容</div> <div class="right">右侧内容</div> </div>
CSS 设置：
.container {
overflow: hidden; /* 清除浮动，防止父容器塌陷 */
}
.left {
float: left;
width: 200px;
}
.right {
float: right;
width: 300px;
}⚠️ 注意：左右宽度之和不能超过父容器宽度，否则右侧会掉到下一行。
立即学习“前端免费学习笔记（深入）”；
更稳妥的方案：用 BFC + 宽度控制
仅靠 float 容易受内容长度、盒模型影响。推荐加明确宽度 + 触发 BFC：
- 给 .left 设固定宽 + float: left
- 给 .right 设固定宽 + float: right
- 父容器用 overflow: hidden 或 display: flow-root（现代推荐）来闭合浮动
例如：
.container {
display: flow-root; /* 推荐，语义清晰，无副作用 */
}
.left { float: left; width: 220px; }
.right { float: right; width: calc(100% - 220px); }兼容老浏览器的清除方式
如果必须支持 IE8 及更早版本，可在父容器末尾加清除元素：
<div class="container"> <div class="left">左</div> <div class="right">右</div> <div style="clear: both"></div> </div>
或者用伪元素清除（更优雅）：
.container::after {
content: "";
display: table;
clear: both;
}替代建议：优先考虑 Flex 布局
纯 CSS 浮动布局已逐渐被 Flex 替代，更简洁可靠：
.container {
display: flex;
}
.left { width: 200px; }
.right { flex: 1; } /* 自适应剩余空间 */无需清除、无塌陷、响应友好，现代项目强烈推荐。
