clear: both 能让 footer 落在内容下方是因为它强制元素避开浮动，等待所有浮动结束才渲染；最有效是加在最后一个浮动元素后的首个非浮动元素上；Flex/Grid 中无效，推荐用 display: flow-root 创建 BFC 自动包含浮动。
为什么 clear: both 能让 footer 落在内容下方而不是跑上去
因为浮动元素脱离文档流，父容器高度塌陷，footer 就会“看不见”前面的浮动块，直接从顶部开始布局。加 clear: both 是告诉浏览器：“这个元素不能紧贴任何浮动元素的旁边”，它必须等所有浮动都结束、换行之后再渲染——相当于强制换行+占位。
给谁加 clear: both 最有效
不是无脑加在 footer 上，而是加在它前面、最后一个浮动内容之后的那个元素上。常见做法有三种：
- 在
footer自身加clear: both（最常用，但前提是它确实是浮动内容之后的第一个非浮动块） - 在浮动容器内部末尾加一个空
<div style="clear: both"></div>（俗称“clearfix hack”，兼容老浏览器） - 用伪元素替代空 div：
.container::after { content: ""; display: table; clear: both; }（推荐，干净且不污染 HTML）
clear: both 在 Flex 或 Grid 布局里还管用吗
不管用。Flex 容器和 Grid 容器天然不塌陷，子项浮动也不会影响父高，clear 属性在这些上下文中被忽略。如果你用了 display: flex 或 display: grid，footer 跑偏大概率是别的原因，比如：
- 父容器没设
min-height: 100vh导致视口内高度不足 - flex-direction 或 align-items 设置不当，把 footer 挤出了可视区域
- 某个子元素用了
position: absolute却没控制好定位上下文
现代项目里更稳妥的替代方案是什么
用 display: flow-root 给浮动容器设为 BFC（块级格式化上下文），它能自动包含浮动、防止塌陷，且无需额外清除：
立即学习“前端免费学习笔记（深入）”；
main {
display: flow-root;
}
这个属性兼容性已很好（Chrome 58+、Firefox 57+、Safari 10.1+、Edge 79+），比 clear 更语义清晰，也避免了“清什么、清到哪”的困惑。
真正容易被忽略的是：浮动本身在现代布局中已基本退场，强行用 float + clear 往往说明结构设计没跟上——先确认是否真需要浮动，而不是一上来就找清除办法。
