display: flow-root 是最稳妥的解法，它在横屏切换时不会因硬件加速或伪元素时机问题失效；只靠 clear: both 或 overflow: hidden 很可能在 ios safari 或安卓 webview 中漏清。
display: flow-root 是最稳妥的解法，它在横屏切换时不会因硬件加速或伪元素时机问题失效；只靠 clear: both 或 overflow: hidden 很可能在 iOS Safari 或安卓 WebView 中漏清。
为什么横屏切换后浮动突然崩了？
横屏触发 viewport 重计算，但浮动元素的脱离流状态没被重置——父容器高度仍为 0，后续内容上浮盖住内容。更关键的是，iOS Safari 和部分安卓 WebView 在横屏时会启用硬件加速（比如页面有 transform 或 will-change），此时 ::after 伪元素清除可能延迟一帧甚至完全不触发。
常见错误现象包括：
- 横屏后页脚直接叠在卡片上，背景色消失
- 下拉菜单被截断，实际是父容器高度塌陷导致 z-index 层叠错乱
- 用
getBoundingClientRect()读取高度，返回值滞后一帧，JS 判断逻辑误判“已清浮”
横屏媒体查询里必须同步改这三项
只加 clear: both 或只设 float: none 都不够。横屏是独立渲染上下文，必须让浮动元素真正“回归文档流”，否则父容器无法重新包含它们。
-
float: none：强制退出浮动，这是前提 -
width: 100%：避免width: auto导致子项收缩或换行错位（尤其原布局用width: 50%时） -
box-sizing: border-box：显式声明，防止某些安卓 WebView 忽略继承，padding/border 撑破宽度
正确写法：
@media (orientation: landscape) {
.grid-item {
float: none;
width: 100%;
box-sizing: border-box;
}
}
display: flow-root 比伪元素清除更可靠
横屏切换频繁、动画密集的场景下，.clearfix::after 容易因渲染管线调度问题失灵；而 display: flow-root 是 CSS 引擎级的 BFC 创建机制，不依赖伪元素生成时机，也不受 transform 干扰。
- iOS 15.4+ 和 Android Chrome 64+ 均已支持，现代项目可放心用
- 它不裁剪
box-shadow、不影响position: fixed导航栏吸顶 - 如果要兼容 iOS 12 或更低版本，降级用
.clearfix，但必须写全：content: ""、display: table、clear: both、height: 0
容易被忽略的横屏陷阱
横屏时 viewport 宽度变大，但很多项目只写了 @media (min-width: 768px)，却忘了 orientation: landscape 的组合判断——比如 iPad 竖屏逻辑宽度是 768px，横屏变成 1024px，但若只靠 min-width，横屏规则根本不会命中。
真正要做的不是“切回浮动”，而是“横屏下按需启用多列”，所以建议：
- 默认样式走单列垂直流（
float: none+width: 100%） - 横屏时才用
@media (orientation: landscape) and (min-width: 768px)启用两列 - 所有浮动子项的
margin必须重置，比如原margin-right: 20px要同步设为margin-right: 0，否则留白异常
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
