浮动列表错位根本原因是宽度失控而非clear未加对；必须统一box-sizing: border-box、显式设置width（如calc(25% - 8px)）、消除html空格，并用display: flow-root或flex替代浮动以彻底解决塌陷与错位问题。
浮动列表错位根本不是clear没加对
错位主因是宽度失控，不是清除逻辑错了。float本身不认“行”，只按顺序贴边；只要某个
必须做三件事：box-sizing: border-box钉死所有
width显式设值（别靠内容撑）；HTML里- 用
width: calc(25% - 8px)代替width: 25%，预留左右各4px间距容错 -
.item:not(:last-child) { margin-right: 8px; }，避免最后一项多出右间距导致换行 - 删掉
- 之间的换行符，写成
<li>...</li> <li>...</li>连写形式
父容器高度塌陷会让后续元素上浮覆盖列表
浮动
- 高度变成0，后面的内容（比如页脚、按钮）直接顶上来——你点不到按钮，是因为它被视觉遮盖，但实际DOM位置还在原处。
- 给
- 加
- 加
- 如果要兼容IE11，改用
.clearfix::after伪元素，但必须带content: ""和display: table - 别给父容器设
height或max-height，会破坏响应式
display: flow-root，不是给高度不一致时文字基线不对齐怎么办
矮的
- 右侧留白，下一个
- 会“钻空”上浮，造成视觉断层。这不是bug，是float原始设计（图文环绕）在布局场景下的副作用。
别硬设
height，内容一变就溢出或留白。可行做法是统一底部文字基线：测出各块文字到底部距离差，对内容短的 - 加
padding-bottom托高，再配box-sizing: border-box防撑宽。- 例如：三个
- 中两个有3行文字，一个只有1行，就给短的那个加
padding-bottom: 32px - 该法只改善视觉对齐，仍需配合
display: flow-root解决塌陷 - 响应式断点里容易漏掉这个调整，PC正常不代表小屏也对齐
真要长期维护，就别用float写列表
浮动不是为栅格设计的。你花半天调
margin、clear、box-sizing，不如三行CSS切到display: flex。迁移只需：
ul设display: flex和flex-wrap: wrap；li用flex: 1 1 280px控制最小宽度；删掉所有float、clear、overflow: hidden补丁。-
flex天然不脱离文档流，点击区域不会跑偏 - 高度自动等高，不用
padding-bottom手动拉齐 - 响应式只需改
flex-direction: column，不用反复算calc()和媒体查询
最容易被忽略的是：
display: flow-root只作用于当前容器，子容器不会继承；嵌套浮动列表时，每一层父- 都得单独处理。
别用overflow: hidden硬清，它可能裁剪弹窗、阴影或绝对定位下拉菜单。现代浏览器全支持display: flow-root，一行代码就能让父容器重新包裹浮动子项，无副作用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
