浮动广告导致父容器塌陷时，clear并非万能解药，因其仅对后续非浮动块级元素生效；推荐用display:flow-root或overflow:hidden闭合浮动，语义更清晰且无副作用。
浮动广告块撑开父容器失败？clear 不是万能解药
当广告块用 float: left 或 float: right 浮起后，正文文字绕排正常，但父容器高度塌陷、下方内容上移——这不是 clear 没生效，而是它根本没被正确“触发”。clear 只对**后续的块级元素**起作用，且前提是该元素自身不浮动、不脱离文档流。
-
clear: both必须写在浮动元素之后的某个块级标签上（如<div>、<code><p></p>），不能加在浮动广告本身上 - 如果广告后面直接是
inline文本或未设display: block的标签，clear无效 - 现代项目中更推荐用
overflow: hidden或display: flow-root替代clear来闭合浮动，语义更清晰、副作用更少 - 给正文外层容器设置
margin-left（左浮广告）或margin-right（右浮广告），值 ≥ 广告块宽度 + 间距 - 确保正文容器
width是明确的（如width: calc(100% - 240px)），避免依赖浏览器自动计算导致错位 - 不要依赖
clear来“推开”文字——它只控制垂直位置，不管水平占位 - 那个
clear元素本身设置了display: inline或display: flex，导致它不参与块级格式化上下文（BFC）构建 - 它被包裹在另一个浮动容器里，继承了父级浮动行为
- 它前面有
position: absolute或position: fixed元素，破坏了正常的文档流顺序 - 检查浏览器开发者工具中该元素是否真的渲染在广告之后（DOM 顺序 ≠ 视觉顺序）
正文文字被浮动广告遮盖？检查 margin 和 width 是否预留空间
浮动广告只影响后续流内元素的布局起点，不会自动为正文“让出宽度”。若正文容器没留够横向空间，文字会从广告右侧边缘开始渲染，甚至重叠。
clear: both 加了却没用？排查 DOM 顺序和 display 类型
常见失效场景：在广告 <div class="ad"></div> 后写了 <div style="clear:both"></div>，但页面毫无变化。大概率是以下原因：
更稳妥的替代方案：用 display: flow-root 闭合浮动
相比老式 clear hack，display: flow-root 是 CSS 标准中专为闭合浮动设计的属性，兼容性已覆盖 Chrome 64+/Firefox 59+/Edge 79+，无副作用。
立即学习“前端免费学习笔记（深入）”；
article {
display: flow-root; /* 自动包含内部所有浮动子元素 */
}
.ad {
float: right;
width: 220px;
}
.content {
/* 不需要额外 clear 元素，也不用 margin 推挤 */
}注意：IE 完全不支持 flow-root，如需兼容 IE，仍需回退到 overflow: hidden 或伪元素清除法（::after { content:""; display:table; clear:both; }）。真正容易被忽略的是——浮动广告一旦响应式缩放，clear 对应的空白高度可能突然消失或溢出，必须配合媒体查询重置 margin 和 width。
