隔墙法仅在特定结构下有效，需用块级元素加clear: both实现浮动清除，分外墙法和内墙法两种形式，但不能解决父容器塌陷根本问题。
隔墙法不是万能解，它只在特定结构下有效，且容易因元素类型或位置错位导致失效。
什么是“墙”？
这里的“墙”是一个额外添加的块级元素，作用是强制中断浮动流，让后续内容从浮动元素下方开始排列。关键点在于：clear: both 必须生效，而它只对块级元素起作用。
- 必须用
<div>、<code><p></p>等默认块级标签，不能用<span></span>或未设display: block的元素 - 该元素不能被
float、position: absolute或display: inline干扰 - 它必须紧接在最后一个浮动元素之后（外墙法）或嵌入其父容器末尾（内墙法）
-
外墙法：在浮动容器外部加墙，例如
<div class="float-container">...</div> <div class="wall"></div>→ 后续盒子可用margin-top，但前一个浮动容器的margin-bottom会被忽略 -
内墙法：在浮动容器内部末尾加墙，例如
<div class="float-container">...<div class="wall"></div> </div>→ 前后盒子的margin都可生效，且能撑开父容器高度（避免父容器塌陷） - 墙元素被包裹在
float容器里，却没脱离浮动流（比如父级也设置了float） - 墙元素本身被
display: inline或display: flex覆盖，失去块级特性 - CSS 优先级冲突，例如其他规则写了
clear: none且权重更高 - 使用了
visibility: hidden或opacity: 0，元素仍在文档流但视觉不可见，clear仍计算；而display: none会让它完全退出流，clear失效 - 内墙法直接在浮动父容器末尾插入
<div class="wall"></div>，不依赖 JS 插入，避免 SSR/SEO 问题 - 永远检查 computed styles 中
clear是否为both，以及该元素是否为display: block
外墙法 vs 内墙法：margin 行为差异明显
两者都靠 clear: both 起作用，但布局影响不同：
为什么加了 clear: both 还没效果？
常见失效原因不是语法写错，而是 DOM 位置或渲染上下文问题：
实际推荐写法（带兼容性考虑）
不要依赖空 <div>，用语义化且可控的方式：
<pre class="brush:php;toolbar:false;">.clearfix::after {
content: "";
display: table;
clear: both;
}
</pre>
<p>——这是现代更稳妥的替代方案。但若必须用隔墙法，建议：</p>
<ul>
<li>外墙法统一用 <code><div class="clear" aria-hidden="true"></div>，并确保 CSS 中有 .clear { clear: both; height: 0; overflow: hidden; }
隔墙法最易被忽略的点：它不解决父容器塌陷的根本问题，只是视觉上“看起来清除了”。真正要让父容器包裹浮动子项，还得靠 overflow: hidden、伪元素或 display: flow-root —— 墙只是障眼法，不是闭合。
