clear: both需作用于footer自身且其为块级元素，否则无效；更可靠方案是给浮动父容器设display: flow-root触发BFC；现代项目推荐用flex布局替代浮动。
footer加clear: both为什么经常没用
因为clear: both只对它所在的元素自身生效，意思是“我这个盒子的下方不能有浮动”，所以必须写在footer自己的样式里。常见错误是把它加在浮动容器（比如.main或.wrapper）上——那个容器本身可能已脱离文档流，clear就等于白写。
还要确认footer是块级元素：clear对inline或inline-block无效，得显式加display: block；如果footer用了position: absolute或fixed，clear也完全失效，得先移除定位再处理。
给浮动父容器加display: flow-root更可靠
浮动塌陷的根源是父容器无法感知浮动子项高度。触发BFC（块级格式化上下文）能让父容器自动包含浮动内容。display: flow-root是专为此设计的现代方案，语义清晰、无裁剪风险，Chrome 58+ / Firefox 53+ / Safari 15.4+ 均支持。
只需给浮动元素的直接父容器（比如.wrapper）加上：
.wrapper {
display: flow-root;
}
不用改HTML，也不用担心副作用，比伪元素::after清除更轻量可靠。别用overflow: hidden——它会意外裁剪position: absolute的下拉菜单、tooltip 或负 margin 元素。
伪元素::after清除法必须满足三个条件
如果项目还需兼容老浏览器（如IE11），伪元素法仍可用，但漏掉任一关键声明就会失效：
-
content: ""（缺省值none不触发渲染） -
display: table（比block更稳妥，避免IE6/7 margin双倍问题） -
clear: both（left/right只清单侧，两栏布局必须用both）
必须加在**直接包裹浮动子元素的容器**上，比如，不是body或最外层layout。别用::before——旧版Safari和IE对它的清除支持不稳定。
现代项目该直接用Flex替代浮动
浮动本就不是为整页结构设计的。如果你的项目支持IE10+，display: flex能一劳永逸避开所有清除问题：
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
main {
flex: 1;
}
footer {
/* 不用管浮动，自然沉底 */
}
关键点：main和footer必须是body的**直接子元素**；如果footer被包在另一个浮动容器里，又绕回原问题。真正容易被忽略的是：浮动影响只存在于当前BFC内，父容器用了flow-root，不代表子容器自动继承——子容器里再浮动，还得自己清。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
