clear: both 必须加在 .footer 自身上且设为块级元素，否则失效；常见原因包括 .footer 非块级、含定位属性或被父容器 bfc 截断；更可靠方案是给浮动父容器设 display: flow-root 或用 ::after 伪元素清除。
clear: both 必须加在 .footer 自身上，且 display: block
直接写 .footer { clear: both; } 却没效果？大概率是它没参与文档流。clear 只对块级元素生效，而很多模板里 .footer 默认是 inline 或 inline-block —— 这时 clear 完全不触发。
必须显式设为块级：
.footer { clear: both; display: block; }- 如果
.footer同时有position: absolute或float，clear也无效，得先移除这些定位 - 别把
clear: both加在浮动容器（比如.main）上——它只作用于当前元素，不是“让父容器收尾”
更稳的解法：给浮动的直接父容器触发 BFC
与其在每个底部位置补 clear，不如让包含浮动子项的父容器自己“感知高度”。触发 BFC（块级格式化上下文）能从源头避免塌陷。
- 现代推荐：
.wrapper { display: flow-root; }—— 无裁剪副作用，Chrome 64+/Firefox 58+/Safari 15.4+ 支持 - 兼容旧浏览器可用：
.wrapper { overflow: hidden; }，但会裁剪position: absolute的下拉菜单或 tooltip - 慎用
overflow: auto：移动端 Safari 在临界高度时可能意外出滚动条
伪元素 clearfix 必须加在正确容器上
用 ::after 清浮不是“加了就灵”，关键在作用对象和写法。
- 必须加在「直接包裹浮动子元素」的容器上，比如
.content，不是body或最外层.layout - 标准写法：
.content::after { content: ""; display: table; clear: both; } - 别用
::before：IE8 和旧版 Safari 对它的清除支持不稳定 - 别漏
content: ""：值为none或空格都不行，必须是空字符串
真正容易被忽略的点：clear 不等于页脚置底
clear: both 只解决“不跟浮动挤在一起”，但页脚是否贴底，取决于整个页面高度计算逻辑。比如：
- 如果用了
min-height: 100vh但没配 Flex 布局，页脚仍可能悬空 - 浮动塌陷和页脚沉底是两个问题，混在一起排查常会绕远路
- 现代项目优先考虑
display: flex或grid替代 float —— 此时清除浮动本身就成了冗余操作
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
