<p>浮动列表错位根本原因是宽度失控而非clear未加对；必须统一box-sizing: border-box、显式设置width（如calc(25% - 8px)）、消除HTML空格，并用display: flow-root或flex替代浮动以彻底解决塌陷与错位问题。</p>

浮动列表错位根本不是clear没加对

错位主因是宽度失控，不是清除逻辑错了。float本身不认“行”，只按顺序贴边；只要某个

实际占宽超了父容器1像素，整行就崩。常见现象是四列布局在桌面正常，缩到平板突然第三项掉到第二行、右侧留白——这不是bug，是浮动在不同宽度下重新计算贴边位置的结果。

必须做三件事：box-sizing: border-box钉死所有

的盒模型；width显式设值（别靠内容撑）；HTML里

之间不能有换行或空格（否则渲染器插入约4px间隙）。

• 用width: calc(25% - 8px)代替width: 25%，预留左右各4px间距容错
• .item:not(:last-child) { margin-right: 8px; }，避免最后一项多出右间距导致换行
• 删掉
• 之间的换行符，写成<li>...</li> <li>...</li>连写形式

父容器高度塌陷会让后续元素上浮覆盖列表

浮动

脱离文档流，父

高度变成0，后面的内容（比如页脚、按钮）直接顶上来——你点不到按钮，是因为它被视觉遮盖，但实际DOM位置还在原处。

别用overflow: hidden硬清，它可能裁剪弹窗、阴影或绝对定位下拉菜单。现代浏览器全支持display: flow-root，一行代码就能让父容器重新包裹浮动子项，无副作用。

立即学习“前端免费学习笔记（深入）”；


Html2md
使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...
下载
• 给
  加display: flow-root，不是给
  • 加
  • 如果要兼容IE11，改用.clearfix::after伪元素，但必须带content: ""和display: table
  • 别给父容器设height或max-height，会破坏响应式

  高度不一致时文字基线不对齐怎么办

  矮的

• 右侧留白，下一个
• 会“钻空”上浮，造成视觉断层。这不是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只作用于当前容器，子容器不会继承；嵌套浮动列表时，每一层父

  都得单独处理。