clear属性作用是让后续块级元素上边界避开指定方向浮动元素，而非隔离浮动或修复父容器塌陷；它只影响自身位置，现代推荐用display: flow-root创建BFC自动包裹浮动。
clear 属性不是用来“隔离”浮动，而是让元素避开浮动的上边界
很多人误以为 clear 是给浮动模块加“隔离罩”，其实它只影响**后续块级元素的顶部定位位置**。比如广告位用了 float: right，正文段落紧随其后却卡在广告右侧——这不是段落“被吸附”，而是它默认允许被浮动元素顶开；加 clear: right 后，段落顶部会下移到广告下方，视觉上就“脱离”了广告影响。
关键点在于：clear 不改变广告本身，也不包裹它，只告诉“我这个元素不准和某侧浮动元素同行”。所以所谓“精准隔离”，本质是**精准控制后续内容从哪开始重新换行**。
广告只右浮动时，用 clear: right 而非 both
如果页面只有一个右浮动广告栏（如侧边 banner），后续正文只需避开右侧即可。此时写 clear: both 是过度的——它会强制换行，哪怕左侧根本没浮动元素，也会多出一段空白间距。
-
clear: right：正文顶部下移，直到右侧无浮动元素，左侧可自由排布（适合主内容流） -
clear: both：无论左右有没有浮动，都强制换行到底部，易造成不必要留白 - 若广告同时有
float: left和float: right子项（比如双栏广告），才需clear: both
clear 失效的三个高频原因
加了 clear: right 却没效果？大概率掉进以下坑里：
立即学习“前端免费学习笔记（深入）”；
- 目标元素不是块级元素：
span、em等内联元素设clear无效，必须是div、p或显式设display: block - 目标元素自身浮动了：自己也
float: left，就不再参与文档流，clear失去作用对象 - 父容器触发了 BFC 但高度塌陷：比如父容器设了
overflow: hidden却没给高度，子元素即使clear了，视觉上仍被裁剪
现代更稳的替代方案：display: flow-root
如果你真正想要的是“让广告浮动不影响父容器高度，也不干扰后续内容”，display: flow-root 比 clear 更直接——它让父容器创建独立的 BFC，天然包裹内部浮动子项，且不强制换行。
例如广告容器：
.ad-container {
display: flow-root;
}这样里面所有 float 广告都会被撑开高度，后续元素自然从容器底部开始排布，无需额外 clear。唯一限制是 IE 不支持，但 2026 年绝大多数项目已可放心用。
真正容易被忽略的是：clear 只解决“后续元素位置”，不解决“父容器塌陷”；而实际项目里，这两者常被混为一谈，结果反复调试却找不到根因。
