新项目或可改html的旧项目无条件选display: flex；仅图文环绕或需兼容ie9及更老浏览器时才用float。
响应式两栏布局该用 display: flex 还是 float
直接说结论：新项目或可改 HTML 的旧项目，无条件选 display: flex；只有两种情况才考虑 float——需要图文环绕，或必须兼容 IE9 及更老浏览器。其他所有“用 float 更轻量”“float 更熟悉”的想法，基本都源于对现代渲染机制的误判。
flex-direction: row + flex-wrap: wrap 怎么应对小屏塌陷
很多人写完 display: flex 就以为万事大吉，结果小屏下两栏被强行压成一列、文字撑爆容器、甚至白屏——问题出在没控制换行边界和子项收缩行为。
- 必须显式加
flex-wrap: wrap，否则默认nowrap，子项宁可溢出也不折行 - 侧边栏固定宽（如 240px）时，写
.sidebar { flex: 0 0 240px; }，避免它被压缩或拉伸 - 主内容区用
.main { flex: 1; min-width: 0; }，min-width: 0防止内部长单词或图片把整行撑宽，触发横向滚动 - 不设
height的父容器上，align-items: flex-start比默认stretch更稳，避免长文本反复测量高度
float: left 在媒体查询里为什么越写越难维护
浮动做响应式两栏，本质是靠人工覆盖：大屏设 float: left + 宽度，小屏用媒体查询取消浮动 + 改宽度 + 补清除逻辑。漏掉任意一环，就塌陷、错位、点击失效。
- 小屏忘记重置
float: none，多个模块堆成一列但因未clear而相互覆盖 - 父容器高度塌陷后，背景色/边框消失，调试第一反应常是“CSS 没生效”，实则是浮动残留
- 触摸目标（如按钮）因浮动偏移位置，又没设足够
padding或min-width，手指点不中 - 每加一个断点，就得同步更新
float、width、margin、clear四组规则，极易遗漏
混用 float 和 flex 时最危险的三件事
过渡期难免共存，但边界一旦模糊，渲染结果就不可控。尤其注意以下三点：
- 别在
display: flex容器里给子元素设float：浏览器会先处理float，再套flex排列，结果完全 unpredictable - 浮动区块后面紧跟
flex容器时，必须隔离：前面的浮动可能影响后面flex容器的位置，加overflow: hidden或::after { clear: both }才稳 - 旧项目迁移时，若子元素还带
float: left，必须显式重置为float: none，否则 Flex 主轴计算会被干扰
真正容易被忽略的是：Flex 的稳定性不来自“语法简单”，而来自它把布局控制权收归父容器——你不再需要操心每个子项怎么避让、怎么清浮、怎么防塌陷。只要父容器声明清楚 flex-direction、flex-wrap 和子项的 flex 值，剩下的交给浏览器。而浮动要求你对每个元素的位置、尺寸、流式关系都做显式干预，稍有疏漏，就是 runtime 布局事故。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
