clear属性仅对块级元素生效，且需紧邻浮动兄弟元素才起作用；常见失效原因包括无浮动兄弟、中间插入普通块元素、自身非块级或父容器BFC隔离；display:flow-root是更可靠的现代替代方案。
clear 属性不是“让元素另起一行”的通用开关，它只在特定浮动上下文中起作用：**当前元素必须是块级元素，且其前面紧邻一个（或多个）浮动兄弟元素**。加了 clear: both 却没效果，大概率是因为这个前提不成立。
为什么加了 clear: both 元素还是没掉下来？
最常见的情况是：clear 找不到可避开的浮动兄弟——它不回溯、不跨元素、不认非文档流内容。
- 目标元素前面根本没有浮动元素（比如浮动元素被
display: none或position: absolute隐藏了） - 浮动
<div>和目标<p>之间插了一个普通块级元素（如未设float的<div>），clear就失效了 - 目标元素自己是
inline或inline-block，而clear只对块级元素生效 - 父容器用了
overflow: hidden但没设高度，或子元素触发了 BFC，导致布局流被隔离
clear: left 和 clear: both 到底该选哪个？
选哪个取决于你页面里实际存在的浮动方向，而不是“保险起见”全用 both。
- 如果只有左浮动广告栏，正文用
clear: left就够了；写both反而会多等右侧“安全区”，造成意外空白 -
clear: both真正必要的情况是：同一行里既有float: left又有float: right（比如导航栏：Logo 左浮 + 菜单右浮） -
clear: right很少单独用，除非你明确要避开右浮侧边栏，且左侧允许被挤
现代替代方案：display: flow-root 更可靠
如果你本意只是“让父容器包住浮动子项，并让后续内容从下方顶格开始”，直接给父容器加 display: flow-root 比每个子元素都加 clear 干净得多。
- 它创建新的 BFC，天然隔离内部浮动，无需额外 DOM 节点或伪元素
- 兼容性良好（Chrome 64+、Firefox 59+、Safari 15.4+、Edge 79+），2026 年已无兼容顾虑
- 不受 DOM 动态插入/删除影响——
clear依赖兄弟顺序，JS 改动后容易失效 - 注意：它不能替代
clear的“强制错位”用途（比如想让某个段落刻意避开左浮图片但保留右浮广告），那是不同需求
真正需要 clear 的典型场景
它适合解决「浮动干扰后续流式内容」这类具体问题，不是布局兜底方案。
立即学习“前端免费学习笔记（深入）”；
- 图文混排时，正文段落被左浮图片顶到右侧，加
clear: left让它掉下来 - 多列浮动卡片后接页脚，页脚加
clear: both避免卡在最后一张卡片右侧 - 表单中浮动的标签和输入框后，按钮需要脱离浮动流，用
clear: both对齐底部
clear 的行为高度依赖 DOM 顺序和相邻元素的浮动状态，一旦结构变化（比如 JS 插入新节点、响应式断点切换 display 类型），就容易失效。比起层层加 clear，优先考虑用 flow-root 封装浮动容器，或直接迁移到 Flex/Grid 布局——这才是 2026 年真正省心的做法。 
