clear: both不生效因只对自身且前有浮动兄弟时才触发换行；常见失效场景包括footer被嵌套、设了定位或非块级显示，以及父容器用flex/grid；应于浮动影响边界点清除，推荐display: flow-root。
footer加clear: both为什么经常不生效
因为clear: both只对「自身元素」起作用，且只在它前面有浮动兄弟元素时才触发换行。如果footer不是浮动元素的直接后续兄弟（比如中间隔着一个div.wrapper或main），它就找不到可清除的浮动参照物，等于白写。
常见失效场景：
-
footer被包在另一个容器里，而浮动实际发生在更内层（如.content内部） -
footer设了position: absolute或fixed，clear属性被忽略 -
footer是inline或inline-block，而clear只对块级元素有效 - 外层用了
display: flex或grid，浮动子项不影响父高，clear根本不会触发
应该在哪加清除？关键看浮动结束的位置
清除动作必须落在「浮动影响所及的边界点」——也就是最后一个浮动元素之后、文档流恢复的第一个块级位置。这个点往往不在HTML结构最直观的地方。
判断依据：
- 如果所有浮动都在
.main内部，就在.main上加display: flow-root，而不是动footer - 如果浮动分布在
header和aside两个独立容器中，就得分别在它们末尾清除，或统一收口到body的直接子容器 - 若只在某个
article里用float做图文混排，清除范围必须严格限制在该article内部，不能外溢
::after伪元素清除法的三个硬性条件
伪元素清除不是加了::after就自动生效。它必须同时满足：
-
content: ""（缺省值none不触发渲染） -
display: table或block（inline默认值会失效） -
clear: both（left/right只清单侧，两栏布局必须用both）
推荐写法：.wrapper::after { content: ""; display: table; clear: both; }。别用::before——旧版Safari和IE对它的清除支持不稳定，还可能干扰flex顺序。
现代项目优先选display: flow-root而非clear
display: flow-root能直接让父容器触发BFC，自动包含浮动子项，从源头避免塌陷。它比clear语义清晰、无副作用，也不依赖“浮动后是谁”这种模糊判断。
兼容性已足够落地（Chrome 58+ / Firefox 57+ / Safari 10.1+ / Edge 79+）。仅当需支持IE11或旧版Android Browser时，才退回到overflow: hidden——但要注意它会裁剪position: absolute的下拉菜单或气泡提示。
真正容易被忽略的是：清除浮动只是补救手段。如果你还在用float组织整页结构，说明布局模型没升级；换成flex或grid后，所有清除逻辑都可删掉，而且更稳定。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
