float实现左侧固定右侧自适应需同时满足：左栏设width+float:left+块级元素；右栏触发bfc（如overflow:hidden）；父容器清除浮动；html顺序为左栏在前。
直接说结论：float 能实现左侧固定、右侧自适应，但必须同时满足三个硬性条件，漏一个就会错位、塌陷或内容被遮盖——这不是“写了 float: left 就完事”的事。
左侧固定栏必须设 width 并加 float: left
只写 float: left 不设 width，浏览器不知道该占多宽，后续布局全乱；用百分比宽度在浮动中容易受父容器 padding 影响，建议用像素值（如 width: 200px）并配 box-sizing: border-box。
-
float: right不能用于左栏，否则右侧逻辑要重写，不是简单对调就能跑通 - 左侧不能是
inline或inline-block元素，必须是块级元素（默认div就行） - 如果左侧含图片，记得加
vertical-align: top避免基线对齐导致的空白缝隙
右侧自适应栏必须触发 BFC，不能只靠 margin-left
很多人只写 margin-left: 200px，结果右侧内容从顶部开始流式渲染，直接叠在左栏上——它根本“看不见”浮动元素。真正起作用的是 BFC（块级格式化上下文）让右侧形成独立渲染区域，自动绕开左栏。
-
overflow: hidden是最常用且可靠的触发方式，IE9+ 支持，现代项目够用 -
overflow: auto也能触发 BFC，但内容略超宽时可能意外出现滚动条 -
display: flow-root语义更准、无裁剪副作用，但 IE 完全不支持 - 别给右栏加
float: right，那会让它贴右边界，中间留白，彻底失去“填满剩余空间”的效果
父容器必须清除浮动，否则高度塌陷
浮动元素脱离文档流，父容器若不处理，高度会变成 0，后续内容直接往上顶，布局全崩。
- 推荐写法：
.container { overflow: hidden; }（简洁，但 IE6–7 不稳定） - 兼容老 IE 必须补：
.container { zoom: 1; }或伪元素清除：.container::after { content: ""; display: table; clear: both; } -
display: table-cell也能生成 BFC，但 IE6 不支持，且右栏会失去margin等块级特性 - 别用
height: 100%强撑父容器高度——没内容时照样塌，治标不治本
HTML 结构顺序不能颠倒
浮动依赖 DOM 渲染顺序。如果把右栏写在左栏前面，它先占满整行，左栏只能被“挤”到下一行——布局完全失效。
- 正确顺序：
<div class="sidebar"></div> <div class="main"></div> - 错误顺序：
<div class="main"></div> <div class="sidebar"></div> - 如果语义要求主内容在前（比如 SEO 或可访问性），就别用
float，改用display: flex或display: grid——浮动天生不支持视觉顺序与 DOM 顺序分离
最容易被忽略的点是：BFC 触发后，右栏容器的边界是否真的包裹了自身内容、且不包含左栏。调试时临时加 outline: 1px solid red 看一眼，比猜强得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
