footer加clear: both有时无效，因其仅对自身生效且要求元素为块级、未脱离文档流；错误加在浮动容器上、或footer设为inline/absolute/fixed均会导致失效。
footer加clear: both为什么有时没用
因为clear: both只对当前元素生效，它告诉浏览器“我这个元素的下方不能有浮动”，所以必须写在footer自己的样式里。常见错误是把它加在浮动容器（比如.main或.wrapper）上——那个容器本身可能已脱离文档流，clear就等于白写。
还要确认footer是块级元素：clear对inline或inline-block无效，得显式加display: block；如果footer用了position: absolute或fixed，clear也完全失效，得先移除定位再处理。
用display: flow-root替代overflow: hidden
浮动塌陷的根源是父容器无法感知浮动子项高度，触发BFC（块级格式化上下文）能让父容器自动包含浮动内容。过去常用overflow: hidden，但它会意外裁剪position: absolute的下拉菜单、tooltip 或负 margin 元素。
display: flow-root是专为此设计的现代方案，语义清晰、无裁剪风险，Chrome 58+ / Firefox 53+ / Safari 15.4+ 均支持。只需给浮动元素的直接父容器（比如.wrapper）加上：
.wrapper {
display: flow-root;
}
不用改 HTML，也不用担心副作用，比伪元素::after清除更轻量可靠。
Flex布局实现真正“视口底部”需满足三个硬条件
很多人写了margin-top: auto却失败，根本原因是 Flex 容器没撑满视口。要让footer始终贴底，必须同时满足：
-
html和body设margin: 0且min-height: 100vh（别用height: 100%，IE 和旧 Safari 行为不一致） - 外层容器（如
.app）设display: flex、flex-direction: column、min-height: 100vh -
footer必须是该 Flex 容器的**直接子元素**，且排在main之后，仅加margin-top: auto，其他什么也别设
如果footer被包在另一个浮动容器里，或者main用了float但没清除，Flex 就会失效——它不修复上游塌陷，只按当前容器高度分配空间。
为什么100dvh比100vh更适合移动端
min-height: 100vh在手机上常出问题：地址栏缩放、键盘弹出时，vh单位会动态重算，导致页面高度突变，footer突然上浮或留白。这不是 CSS 写错了，而是视口环境变了。
100dvh（dynamic viewport height）是现代浏览器（Chrome 105+ / Safari 16.4+ / Firefox 110+）提供的新单位，它始终代表“当前可见视口高度”，不受地址栏或键盘影响。可作为降级方案：
.app {
min-height: 100dvh;
min-height: 100vh; /* fallback */
}
注意：dvh目前还不支持所有安卓 WebView，上线前务必实测真机表现——这点最容易被忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
