float导致父容器高度塌陷是因为浮动元素脱离文档流，父容器无法正确计算高度，若再设置overflow:auto/hidden会误判内容溢出而显示滚动条；推荐用display:flow-root或伪元素clearfix清除浮动，小程序中应禁用float改用flex或grid。

为什么 float 会让父容器高度塌陷，进而触发滚动条？ 浮动元素脱离文档流，父容器无法感知其真实高度，计算出的高度可能为 0 或远小于实际内容占据空间。此时若父容器设置了 overflow: auto 或 overflow: hidden，浏览器会强制创建 BFC，但又因高度误判，把“本该撑开”的内容当成“溢出”，从而错误地显示滚动条——尤其是横向滚动条，哪怕你只写了几行文字。

• 父容器 height 或 max-height 是固定值时，风险最高
• 开发者工具里检查父容器的 computed height，若明显偏小（比如 20px 而子项实际高 200px），基本可锁定是浮动塌陷
• 临时把父容器 overflow 改成 visible，滚动条消失 → 这是典型 BFC + 浮动高度冲突

清除浮动但别依赖 overflow: hiddenoverflow: hidden 能“解决”塌陷，是因为它顺带触发了 BFC，但它副作用太强：可能意外裁剪内容、掩盖右浮元素的 margin、在 Safari 下引发滚动卡顿。

• ✅ 推荐用 display: flow-root：语义清晰、无裁剪、不干扰滚动逻辑
• ✅ 兼容旧版可用伪元素 clearfix：.clearfix::after { content: ""; display: table; clear: both; }
• ❌ 避免用空
  ：DOM 冗余，且若该 div 被设了 height: 0 或 font-size: 0，仍会塌陷
• ❌ 不要用 clear: both 单独加在浮动元素后面——它只控制位置，不重建 BFC，对裁剪和滚动毫无作用

微信小程序里 float 根本不该出现 小程序的 view、scroll-view 渲染走 WebView，而 textarea、map 等是原生组件，两者坐标系分离。float 在这里既不生效，又会干扰 scroll-view 高度推导、fixed 定位偏移、甚至让 iOS 上 placeholder 悬浮。

• 所有含 float: left / float: right 的写法，在小程序里都应立刻删除
• 替换方案只有两个：display: flex（主推）或 display: grid
• 特别注意 scroll-view 的直接子元素、swiper-item 内部、position: fixed 导航栏里的菜单项——这些地方用 float 几乎必出滚动异常

横向滚动条突然出现？先查 width 和 box-sizing 浮动本身不决定宽度，但常伴随 width: calc(25% - 8px) 这类计算，一旦父容器没设 box-sizing: border-box，padding 或 border 就会让总宽超 100%，触发横向滚动条。

• 给浮动父容器加 box-sizing: border-box
• 检查所有浮动子项的 width + margin + padding + border 是否严格 ≤ 100%
• 临时加 border: 1px solid red 到父容器，肉眼确认是否真被撑出边界
• 更稳妥的做法：放弃 float，改用 flex-wrap: wrap + flex-basis 控制列宽

浮动导致的滚动异常，本质是布局机制与渲染引擎之间的错位。它不报错，不警告，只在滚动时悄悄出问题——最危险的地方，就是你以为它“看起来还行”。

CSS

CSS 官方网站入口。访问 W3C 的 CSS 页面，查看 CSS 标准、学习资料与工作组动态；CSS 是 Web 标准，无需下载安装。

下载

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！