clear: both 必须加在紧接浮动元素之后的块级元素上才有效，如后续的、或页脚容器；加给浮动元素自身或父容器均无效，且要求该元素与浮动元素同属一个父容器的同级兄弟节点。

clear: both 必须加在谁身上才有效

它只对「紧接在浮动元素之后的块级元素」起作用，不是加给浮动元素自己，也不是加给父容器。常见错误是给 <img> 或 <div class="float-left"> 加 <code>clear: both，这完全无效——浮动元素已经脱离文档流，clear 对它没意义。

正确做法是：找到浮动元素后第一个需要“从下一行开始”的块级元素，比如后续的 <p></p>、<div> 或页脚容器，直接给它加 <code>clear: both。

• 如果浮动后面是纯文本节点（没包裹标签），clear 无法生效，必须先用块级标签包住
• 该元素必须是块级盒：display: block、display: table 等；display: inline 或 display: flex 会忽略 clear
• 它不继承，也不受浮动取消（如 float: none）自动影响，响应式断点里得手动重置为 clear: none

clear: both 为什么有时加了也没反应

不是属性失效，而是触发条件不满足。最常被忽略的是 DOM 层级关系和浮动连续性。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 目标元素前面必须有浮动兄弟元素；中间插了一个没浮动的 <h3></h3> 或 <div>，<code>clear 就不会回溯去“清理”更早的浮动
• 浮动元素和清除目标必须属于同一父容器下的同级兄弟节点；嵌套在不同容器里，clear 视为无关联
• 父容器高度塌陷时，即使子元素加了 clear: both，视觉上也可能卡在错位位置——这是两个问题：clear 解决定位，BFC 才解决塌陷
• 检查 DevTools 的 Computed 样式，确认 clear 值确实被应用，且该元素未被其他布局模式（如 Flex/Grid）覆盖

display: flow-root 是比 clear: both 更干净的替代方案

如果你真正想解决的是「浮动导致父容器高度塌陷 + 后续内容错位」，直接用 display: flow-root 更可靠。它让父容器形成 BFC，自动包裹内部所有浮动子项，无需额外样式或伪元素。

• display: flow-root 兼容 Chrome 58+ / Firefox 55+ / Edge 79+，IE 不支持但已淘汰
• 比 overflow: hidden 安全：不会意外裁剪 position: absolute 子元素、阴影或下拉菜单
• 比 ::after { content: ""; display: table; clear: both; } 少一重样式依赖，逻辑直白
• 注意：它只作用于父容器，不影响子元素浮动行为本身；若还需控制某段文字避开浮动，仍需单独给那块加 clear: both

clear: left 和 clear: right 的实际差异别乱用

clear: both 是通用解法，但不是唯一解法。选错取值会导致右侧内容顶上来、布局偏移等意外效果。

• clear: left 只保证该元素上边框不低于**任意 float: left 元素的底部**，但右浮动仍可能贴着它的右边往上顶
• clear: right 同理，仅避让右浮动，左浮动照常干扰
• 导航栏中 logo 左浮、菜单右浮，若页脚只需避开右浮菜单，用 clear: right 更精准，避免过度下推
• 性能无差别，但语义准确能减少协作误解和后期调试成本
真正容易被忽略的，是「浮动与清除必须共处同一 BFC 内」这个前提。一旦父容器因 transform、contain 或其他原因创建了新格式化上下文，clear 就会失效——这时候再怎么调 clear 值都没用，得先理清 BFC 层级。