两栏布局关键在正确使用float或flex：float需触发BFC、显式设宽、避免float:right；flex需父容器设display:flex、左栏flex:0 0 200px、右栏flex:1并加min-width:0；响应式推荐flex-direction:column切换。
两栏布局是网页开发中非常常见的需求，但用传统方式（比如 float）容易出现高度塌陷、清除浮动麻烦等问题；而直接上 flex 又可能因浏览器兼容性或父容器设置不当导致失效。关键不在“用哪个”，而在“怎么用对”。
用 float 实现两栏：老但可靠，注意三点
float 并未过时，尤其在需要兼容 IE9+ 的项目中仍有价值。但它不是“设了就完事”，必须配合清除和宽度控制：
-
父容器要触发 BFC：比如加
overflow: hidden或display: flow-root，防止子元素浮动导致父容器高度塌陷 -
左右栏显式设宽：例如左栏
width: 200px，右栏width: calc(100% - 200px)，避免因盒模型（padding/border）导致换行 -
不用
float: right做右栏：优先让右栏紧跟 HTML 顺序，用float: left+margin-left推开，更易维护
用 flex 实现两栏：推荐主流方案，重点在容器设置
flex 更直观，但常见问题多出在父容器没设 display: flex，或子项没控好 flex 属性：
-
父容器必须设
display: flex，且建议加上flex-wrap: nowrap（默认值，但显式声明更稳妥） -
左栏固定宽，右栏自适应：左栏设
flex: 0 0 200px（不缩放、不增长、宽200px），右栏设flex: 1即可撑满剩余空间 -
注意 min-width 影响：如果右栏内容太长，默认会压缩，可加
min-width: 0防止溢出或文字不换行
响应式两栏：别只靠媒体查询硬切
真正实用的两栏，往往需要在小屏变单栏。与其在每个断点重写布局，不如用更轻量的方式：
-
flex 方案下，小屏直接改方向：媒体查询中设
flex-direction: column，左右栏自然堆叠，无需改 HTML 结构 -
float 方案慎用媒体查询切换 float：容易引发重排，建议小屏时直接取消 float，改用
width: 100%+margin: 0 auto - 留白和间距统一用 padding/margin 控制，不要依赖 float 的“贴边”效果，否则响应式时容易错位
调试小技巧：快速定位布局异常
左右结构错乱时，先别急着改 CSS，用这几个方法快速定位：
- 在浏览器开发者工具中，临时给父容器加
outline: 1px solid red，看是否包裹住子项 - 右键检查左右栏元素，看 computed 样式里
flex-basis或width是否符合预期 - 禁用所有 margin/padding，确认是否是盒模型干扰导致换行或偏移
