浮动元素撑不开父容器高度是因为脱离文档流导致父容器高度塌陷；清除浮动后100vh仍不顶满屏幕，需设父容器min-height:100vh、子元素height:100%，并用flex替代float以规避问题。
浮动元素为什么撑不开父容器高度
因为 float 会让元素脱离文档流，父容器默认“看不见”浮动子元素的高度，导致高度塌陷。哪怕子元素用了 height: 100vh，父容器依然可能高为 0——这不是 vh 没生效，而是父容器本身没高度可继承。
清除浮动后，100vh 还是不顶满屏幕？
常见错误是只加了 clear: both 或伪元素清除，但忘了：父容器若没有显式高度，100vh 在子元素上也只按“当前行内格式化上下文”的可用高度计算，而该上下文可能被其他非浮动内容压缩。
- 确保父容器设
height: 100vh或min-height: 100vh（推荐后者，防内容溢出） - 浮动子元素自身也要设
height: 100%，而不是仅靠100vh——它继承的是父容器的计算后高度 - 清除浮动必须作用在父容器末尾（如
::after），且该清除节点不能 display: none 或 visibility: hidden
更稳妥的替代方案：用 flex 替掉 float
浮动本就不适合做全屏分栏布局，display: flex 配合 flex-direction: row 和 height: 100vh 能直接规避清除浮动问题，语义和兼容性都更好（IE10+ 支持）。
示例：
.container {
display: flex;
height: 100vh;
}
.left, .right {
flex: 0 0 300px; /* 固定左栏 */
}
.main {
flex: 1; /* 自适应剩余宽度 */
}
注意：如果必须支持 IE9 及以下，才需退回浮动 + BFC 方案（如 overflow: hidden 触发 BFC），但此时 100vh 在旧版 IE 中不被识别，得用 height: 100% 并逐级保证父级有高度。
vh 单位在移动端的隐藏陷阱
Safari iOS 和部分安卓浏览器中，地址栏收起/展开会动态改变视口高度，100vh 可能瞬间变小或变大，造成分栏错位甚至滚动条闪现。
- 临时解法：用 JS 监听
resize事件重设document.documentElement.style.setProperty('--vh', window.innerHeight * 0.01 + 'px')，CSS 中用height: calc(var(--vh, 1vh) * 100) - 长期建议：对分栏区域改用
min-height: 100vh+height: auto，允许内容自然撑开，避免强绑定视口瞬时值
浮动只是历史遗留的布局手段，真正要做全屏分栏，优先检查是否真需要 float；一旦引入 vh，就得同步考虑视口动态性——这两点最容易被跳过。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
