真要自适应布局应改用 flex 或 grid；若必须用 float，则须设明确 width、清除塌陷、用 box-sizing:border-box 防溢出，并在媒体查询中同步调整 float、width 和 clear。
用 float 实现左右两栏自动布局，现在能跑通，但不是“自动”的——它不响应内容变化、不处理塌陷、不适应视口缩放，所谓“自动”只是靠人手动算宽+清浮动撑出来的假象。真要自适应，得换 flex 或 grid；如果必须用 float（比如维护 IE8 项目或邮件模板），那就得守住几条硬边界。
为什么只设 float: left 不行
浮动元素会脱离文档流，但浏览器不会自动给它分配宽度：没设 width，它就按内容撑开，可能占满整行，也可能被压缩到最小，根本不会和另一栏并排。常见现象是右栏直接掉到下一行，或者两栏上下堆叠。
-
float: left必须配具体width，如width: 200px、width: 30%、width: calc(50% - 10px) - 百分比宽度的前提是父容器有明确宽度（不能是
width: auto且无限制） - 若右栏用
margin-left预留空间，该值必须 ≥ 左栏实际占用宽度（含padding和border）
父容器高度塌陷怎么破
这是 float 分栏最常卡住的地方：浮动后父容器“看不见”子元素，高度变成 0，背景消失、边框不见、后续元素上移覆盖内容。
- 临时救急：在父容器末尾加
<div style="clear:both"></div> - 更常用：给父容器设
overflow: hidden或overflow: auto（注意可能意外裁剪或触发滚动条） - 推荐写法：用伪元素清除，父容器加
::after { content: ""; display: table; clear: both; }，兼容性好且不干扰布局
用百分比做“自动”宽度的坑
写 width: 65% + width: 35% 看似灵活，但一加 padding 或 margin 就超 100%，右栏立刻换行；缩屏时固定像素值又会溢出。
- 左右栏之间留间隙，别只靠
margin-right，要配合box-sizing: border-box，否则内边距会额外加宽 - 避免纯
width: 300px，改用max-width: 300px; width: 100%组合，小屏时自动收缩 - 媒体查询里重置
float，必须同步改width和clear，例如：@media (max-width: 768px) { .left, .right { float: none; width: 100%; clear: both; } }
真正麻烦的是混用场景
现代页面里，float 最怕遇到 position: absolute、transform、Vue/React 的条件渲染，甚至某个第三方弹窗 JS 动态给 body 加了 overflow: hidden，侧边栏就突然消失——问题不在你写的那几行 CSS，而在整个布局链路里某处悄悄破坏了 BFC 或触发了重排。
这不是配置错了，而是 float 的设计定位本就不适合作为布局主干：它是为图文环绕服务的，不是为结构化分栏准备的。能不用，就别用；非用不可，就得全程手动兜底，一个疏漏，整页错位。
