clear: both必须加在footer自身且为块级元素，否则无效；它只解决起点错位，不修复父容器塌陷；页脚沉底需结合Flex/Grid布局实现。
页脚沉底失败，八成不是 clear: both 没写，而是它没起作用——要么加错位置，要么根本没解决塌陷根源。
为什么 clear: both 加在 footer 上还不管用
常见错误是把 clear: both 当成“万能补丁”，随便加在 footer 元素上就以为完事。但实际生效需要三个前提：
-
footer必须是块级元素（display: block或默认块级）；inline或inline-block会直接忽略clear -
clear: both只阻止自身出现在浮动元素旁边，不修复父容器塌陷——如果上层.main高度还是 0，footer就只能从视口顶部开始渲染 - 若
footer的父容器设置了height、overflow: hidden或其他限制，可能掩盖了塌陷，但并未真正清除浮动
伪元素 ::after 清除必须作用于浮动容器本身
最稳妥的清除方式是让包裹浮动子项的容器（比如 .main 或 .wrapper）自己“收尾”。关键点在于：
- 类名要加在**直接包含浮动子元素的父容器**上，例如：
<div class="main clearfix"><div class="float-left"></div></div> - 必须用
::after，不用::before——IE8 及更早版本对::before的清除支持不可靠 -
display: table比display: block更稳：避免 IE6/7 下 margin 双倍问题，也兼容 BFC 触发 - 示例代码：
.clearfix::after { content: ""; display: table; clear: both; }
display: flow-root 是现代首选方案
比起手动清除，让父容器主动“感知”浮动高度更干净。触发 BFC 是源头解法，而 display: flow-root 是目前最推荐的方式：
立即学习“前端免费学习笔记（深入）”；
- 它明确语义为“创建一个独立的块级格式化上下文”，自动包含所有浮动子元素，无副作用
- 兼容性已足够好（Chrome 64+ / Firefox 58+ / Safari 15.4+），CanIUse 支持率 >98%
- 比
overflow: hidden安全：不会意外截断真实溢出内容；比overflow: auto稳定：不触发移动端 Safari 的滚动条误判 - 写法极简：
.main { display: flow-root; }
页脚沉底 ≠ 清除浮动，别混淆两个问题
清除浮动只是解决“父容器塌陷”，而页脚沉底是布局目标。两者常被混为一谈，但逻辑链条不同：
- 如果只清浮动却不设高度基准，
footer仍可能贴着内容末尾而非视口底部——此时需配合min-height: 100vh和 Flex 布局 -
body { display: flex; flex-direction: column; min-height: 100vh; }+footer { margin-top: auto; }才是真正可靠的粘性页脚方案 - 浮动本身在现代布局中已非必要：若你正用 Flex/Grid，却还在给子元素加
float并拼命清除，说明结构逻辑冲突，该先删浮动
最容易被忽略的是：DOM 层级是否满足“浮动容器 → 直接子元素 → footer 是其兄弟节点”这一链路，以及 html 和 body 是否设置了 margin: 0 和 min-height: 100vh ——缺一不可。
