移动端浮动元素“跑偏”或父容器塌陷，是因为float使元素脱离文档流，父容器无法感知其高度，且在不同DPI、缩放或字体设置下像素对齐误差被放大；overflow: hidden或display: flow-root可触发BFC解决，但优先推荐flex布局。
为什么移动端浮动元素会“跑偏”或父容器塌陷
因为浮动元素脱离文档流，父容器无法感知其高度，导致后续内容上移、布局错位；在视口缩放或不同DPI设备下，float 的像素对齐误差会被放大，尤其在小屏上容易出现换行错乱、间隙不均等问题。
这不是CSS写错了，而是float本身的设计局限——它本就不是为响应式布局而生。
- 常见现象：
float: left的按钮组在iPhone上突然换行、右侧空白变大；float: right的关闭图标“飘”到上一行 - 触发条件：父容器未清除浮动 + 宽度计算依赖
vw或%+ 字体缩放开启（iOS「更大字体」设置） - 兼容性影响：Android WebView 旧版本对
float+box-sizing: border-box组合渲染不稳定
用overflow: hidden触发BFC是最简解法
给浮动元素的父容器加overflow: hidden（或auto、scroll），能强制创建BFC，让父容器包含浮动子元素、重绘布局边界。
注意：overflow: hidden本身不解决浮动逻辑，它只是BFC的触发方式之一；真正起作用的是BFC的两个特性：内部浮动元素不会影响外部、BFC区域不会与浮动元素重叠。
- 必须加在**直接包裹浮动元素的父容器**上，不能隔层加
- 慎用
overflow: hidden如果该容器内有下拉菜单、弹窗等需要溢出显示的内容 - 替代方案：
display: flow-root（现代浏览器支持，无溢出裁剪副作用） - 示例：
.list-item { overflow: hidden; } /* 包裹多个 float:left 的 .tag */
display: flow-root比overflow: hidden更干净
display: flow-root是专为创建BFC设计的值，语义明确、无副作用，且不会意外隐藏溢出内容或触发滚动条。
它的兼容性已覆盖主流移动端：Chrome 64+、Firefox 58+、Safari 12.1+、iOS Safari 12.2+。微信内置浏览器（X5内核）从v6.7.5起也支持。
- 对比
overflow: hidden：flow-root不改变盒模型行为，不影响position: absolute子元素的定位参考 - 不要混用：
display: flow-root和float不能同时作用于同一元素（float会被忽略） - 可配合
min-width: 0解决flex/flow-root下文本溢出截断问题 - 示例：
.card-header { display: flow-root; } /* 安全包裹 float:right 的 .more-btn */
浮动不是万能的，优先考虑flex或grid
除非要兼容iOS 9以下或Android 4.4 WebView，否则没必要坚持用float做布局。BFC只是兜底手段，不是推荐方案。
移动端真实场景中，float几乎只适合纯装饰性小图标（如文字旁的float: left小箭头），一旦涉及对齐、换行、响应式宽度，flex的align-items和flex-wrap更可控。
-
float无法实现垂直居中，flex一行搞定：display: flex; align-items: center; -
float在横竖屏切换时需额外媒体查询重置，flex-direction: column天然适配 - 老项目迁移建议：先用
display: flow-root稳住现有浮动布局，再逐步替换成flex容器
BFC原理本身不难，但容易忽略触发条件是否生效、父容器是否被其他样式（比如transform）意外创建了新层叠上下文从而干扰布局。真出问题时，先检查computed style里display和overflow的实际值，而不是直接改float方向。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
