17370845950

clear属性不清除浮动，仅使自身上边框避开前序浮动元素；常见失效原因包括作用对象错误、父容器未触发BFC、目标元素非块级、HTML结构中断或布局模式冲突。

clear 属性本身不会“清除浮动”，它只是让当前元素避开前面浮动元素的影响。如果看起来 clear 不生效，通常是因为对它的作用机制理解有偏差，或 HTML 结构、CSS 规则存在干扰。

clear 作用对象错了

clear 只对 自身所在元素的上边框（border-top）位置 起作用，让它避开前面浮动元素的外边缘。它不改变父容器高度，也不影响其他兄弟元素的浮动状态。

• 写在浮动元素自己身上（如 float: left; clear: both;）——没意义，它自己正处在浮动流中，clear 对它无效
• 写在非浮动的后续块级元素上才有效，例如：
  
  
  此时给 .clear-fix 设置 clear: both 才会让它下移避开上面的浮动

父容器未触发 BFC，导致高度塌陷被误认为“clear 失效”

很多人想“清除浮动”其实是想让父容器包住内部浮动子元素（即解决高度塌陷）。但 clear 本身做不到这点——它不撑开父容器。这是最常见的误解来源。

• 正确做法是让父容器形成 BFC，例如：
  overflow: hidden;、display: flow-root;（推荐）、float: left; 或 position: absolute;
• display: flow-root 是现代标准解法，无副作用，兼容性已覆盖主流浏览器（Chrome 64+/Firefox 59+/Edge 79+）

clear 元素自身不是块级元素或被其他规则覆盖

clear 只对 块级盒（block-level box） 生效。如果目标元素是 inline 元素（如 span），或被 display: inline、display: flex 等覆盖，clear 就会被忽略。

• 检查 computed styles，确认该元素实际 display 值是否为 block、table、flex、grid 等块级上下文
• 确保 clear 规则没有被更高优先级样式覆盖（比如用 !important 的其他规则，或更具体的 CSS 选择器）
• 注意：浮动元素的 margin 不会和 clear 元素的 margin 合并，但 clear 元素若紧跟浮动后且无 border/padding，视觉上可能显得“没起作用”，可加 height: 1px 或 border-top: 1px solid transparent 验证是否真下移

HTML 结构中断或 clear 元素未紧跟浮动之后

clear 的“前面”指的是文档流中紧邻的、已渲染的浮动元素。如果中间插入了非浮动的空元素、注释、文本节点，或使用了 flex/grid 布局打断文档流，clear 可能找不到预期的浮动参照物。

• 避免在浮动元素和 clear 元素之间插入无关标签或空白文本节点
• 不要在父容器上用 flex 或 grid，又期望子元素用 clear 控制位置——flex/grid 容器内浮动本身已被忽略，clear 自然失效
• 调试时可临时加背景色和边框，可视化每个元素的实际位置和尺寸