必须同步处理float、clear和bfc触发逻辑才能修复浮动断行错乱，仅改width百分比无效；断点应统一用min-width且配合三件套（float:none、width:100%、box-sizing:border-box）及父容器bfc触发。
单靠改 width 百分比解决不了浮动断行错乱，必须同步处理 float、clear 和父容器的 BFC 触发逻辑。
为什么只改 width: 50% 到 width: 100% 还是错位
浮动元素已脱离文档流，浏览器仍按浮动上下文计算布局。你设了 width: 100%，但没写 float: none，它依然“浮”在旧位置；若父容器没清浮动（比如缺 clearfix 或 overflow: hidden），塌陷状态残留，新宽度下反而更错乱。另外，box-sizing: content-box 下 width: 50% + padding: 10px 实际宽度远超 50%，小屏一缩就溢出换行。
- 必须显式声明
float: none，不能只依赖宽度变化 - 父容器需触发 BFC：加
overflow: hidden或用::after伪元素清除（.clearfix::after { content: ""; display: table; clear: both; }） - 统一写
*, *::before, *::after { box-sizing: border-box; }，避免 padding/border 溢出
@media 断点该用 min-width 还是 max-width
必须用 @media (min-width: 768px)，不是 max-width。移动端优先要求默认小屏样式（块状堆叠），再用 min-width 增强为并排。写 @media (max-width: 767px) 是反模式：设备视口恰好 768px（如 iPad 竖屏）时规则完全不生效，两栏直接挤成一行还溢出——这是 CSS 层叠机制决定的，不是 bug。
-
@media (min-width: 480px)已覆盖绝大多数竖屏手机，无需为 iPhone SE（320px）单独设断点 - 避免嵌套写法如
@media (min-width: 768px) and (max-width: 1023px)，易被解析为 false positive - 所有断点里，只要列数变化（2 栏 → 1 栏），就得同时改子项
float/width、父容器清除方式、间隙控制方式
浮动断行修复必须配齐“三件套”
只动一个属性大概率白忙。每个断点切换时，要同步处理三项：
- 子项：加
float: none+width: 100%+box-sizing: border-box - 父容器：加
clearfix类或overflow: hidden（注意会裁剪position: absolute子元素） - 关键间隙：用
margin控制间距，不用padding—— 浮动元素的padding会参与宽度计算，margin不会
真要省事就别用浮动
纯浮动做不到“屏幕一缩就自动从 4 列 → 2 列 → 1 列”。你只能手动写死几个断点，每档重复处理清除逻辑。而 display: flex 天然支持 flex-wrap 和 flex-basis，删掉所有 float/clear，加 display: flex 和 flex-direction: column，移动端断行问题就没了——前提是 JS 里没硬编码读取 offsetTop 或依赖浮动脱离文档流做定位。
容易被忽略的是：浮动取消后，文字环绕容器若没形成 BFC（比如仍是 overflow: visible），右侧文字可能截断或覆盖图片；此时给文字容器加 overflow: hidden 或 display: flow-root 才真正解耦。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
