clear: both 必须加在 footer 自身上且设为块级元素，否则失效；常见原因包括 footer 非块级、父容器限制高度或被高权重样式覆盖；更可靠方案是用 .content::after 清除浮动或 display: flow-root 触发 bfc。
clear: both 必须加在 footer 自身上，且它得是块级元素；否则 footer 会和浮动内容并排或上浮——这不是 bug，是 CSS 浮动的必然行为。
为什么 clear: both 加在 footer 上还失效？
常见现象：写了 .footer { clear: both; }，但页脚仍卡在浮动区域中间、背景被截断、甚至被侧边栏盖住。
- 该
footer元素实际是inline或inline-block——clear只对块级元素生效，记得加display: block - 父容器（比如
.main）设置了height、overflow: hidden或position: absolute，掩盖了塌陷但没解决清除逻辑 - 第三方样式库（如某些 Admin 模板）里有更高权重的选择器，比如
.footer { clear: none !important; }，直接覆盖你的规则 - 你在开发者工具里看到
clear: both被划掉，点开那条被覆盖的规则，看它的选择器权重（如#app .layout-footer是 101，而你的.footer只有 10）
用伪元素 ::after 清除浮动更可靠
不依赖 footer 位置，也不污染 HTML，关键是它作用在「包裹浮动子元素的直接父容器」上。
- 必须加在浮动子元素的**直接父容器**上，比如
<div class="content">...浮动元素...</div>，而不是body或最外层layout - 推荐写法：
.content::after { content: ""; display: table; clear: both; }——display: table兼容 IE6/7，避免 margin 双倍问题 - 别用
::before：IE8 及更早版本对它的清除支持不稳定 - 如果项目已用 Flex/Grid 布局，还硬套浮动 + clearfix，说明结构冗余——此时浮动不是解法，是负担
overflow: hidden 和 display: flow-root 的取舍
二者都能触发 BFC，让父容器自动包含浮动子元素，从源头避免塌陷。但副作用不同：
-
overflow: hidden兼容性最好（IE6+），但会裁剪真实溢出内容（比如下拉菜单、tooltip、动画移出边界的部分） -
display: flow-root是现代标准方案，无裁剪副作用，Chrome 64+/Firefox 58+/Safari 15.4+ 支持；若需兼容旧版 Safari，慎用 -
overflow: auto看似折中，但在移动端 Safari 中可能意外触发滚动条，尤其当内容高度刚好临界时
真正容易被忽略的是：清除浮动 ≠ 让页脚“置底”。clear: both 只解决“不跟浮动挤在一起”，而页脚是否贴底，取决于整个页面高度计算逻辑（比如是否用了 min-height: 100vh + Flex 布局）。这两个问题混在一起排查，常会绕远路。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
