必须用 min-width，因移动优先要求默认小屏样式，再用 min-width 媒体查询增强；错用 max-width 会导致断点失效、布局溢出；浮动本身无响应性，需配合 clear、clearfix 和 box-sizing 修复塌陷与错位。
浮动布局响应式断点该用 min-width 还是 max-width？
必须用 min-width，否则移动端基础样式会被覆盖。浮动本身不带响应性，靠媒体查询“补救”，而移动优先的逻辑要求：默认写小屏样式（块状堆叠），再用 @media (min-width: 768px) 去增强为并排——这样能避免大屏规则意外压过小屏规则。
- 错用
max-width: 767px是常见错误：它只在窄屏生效，一旦屏幕稍宽（比如 768px）就完全失效，导致两栏突然挤成一行还溢出 - Bootstrap、Tailwind 等主流方案全采用
min-width断点，不是巧合，是 CSS 层叠机制决定的 - 别为 iPhone SE（320px）、Pixel（412px）等具体机型单独设断点，
min-width: 480px已覆盖绝大多数竖屏手机
浮动元素在断点切换时为何错位或塌陷？
因为浮动脱离文档流，而媒体查询只改样式，不自动重置布局上下文。你改了宽度，但没同步处理 float、clear 和父容器包裹能力，结果就是视觉错行、高度塌陷、内容重叠。
- 每个断点里，只要改变列数（比如从 2 列变 1 列），必须显式写
float: none，不能只改width - 父容器必须加
.clearfix或overflow: hidden，否则即使子项float: none了，旧的塌陷状态可能残留 -
box-sizing: border-box是刚需：百分比宽度 + padding/border 容易超 100%，尤其在width: 50%的双栏场景下
如何让浮动列数随屏幕自适应，又不写一堆断点？
老实说，纯浮动做不到真正“自适应列数”。你只能手动定义几个关键断点（如 480px、768px、1024px），每档写死列宽和清除逻辑。想实现“屏幕一缩就自动从 4 列→2 列→1 列”，就得换技术栈。
- 用
float+ 媒体查询，典型写法是：.col { float: left; width: 25%; }→@media (max-width: 1023px) { .col { width: 50%; } }→@media (max-width: 767px) { .col { float: none; width: 100%; } } - 若强行追求“无断点自适应”，
display: flex配flex-wrap: wrap或display: grid配repeat(auto-fit, minmax(280px, 1fr))才是正解 - 浮动方案里唯一能缓解的，是加
min-width: 240px和max-width: 360px控制单列弹性，防止小屏过挤、大屏过散
为什么现在还用浮动做响应式，大概率会踩无障碍和维护坑？
因为浮动不改变 DOM 顺序，但强行改变渲染顺序，这对屏幕阅读器、键盘导航、触摸热区都是隐性破坏。而且后期加新模块、调间距、对齐高度，全是靠 hack 堆出来的。
- 视觉上右导航放在 HTML 前面，用
float: right挪到右边——屏幕阅读器却先读它，逻辑断裂 - 浮动卡片高度不一致时，下一行会卡在高卡片旁边，形成参差缺口，
clear: both又会导致整行换行，控制粒度太粗 - 现代项目里，
flex或grid替换浮动，通常只需改一行display值 + 调两个属性，维护成本直降
min-width 和 clear，早点把 float 换成 display: grid 或 display: flex——它们的响应能力是原生的，不是靠媒体查询硬凑的。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
