clear属性不清除浮动，仅使自身上边框避开前序浮动元素；常见失效原因包括作用对象错误、父容器未触发BFC、目标元素非块级、HTML结构中断或布局模式冲突。
clear 属性本身不会“清除浮动”，它只是让当前元素避开前面浮动元素的影响。如果看起来 clear 不生效，通常是因为对它的作用机制理解有偏差，或 HTML 结构、CSS 规则存在干扰。
clear 作用对象错了
clear 只对 自身所在元素的上边框（border-top）位置 起作用，让它避开前面浮动元素的外边缘。它不改变父容器高度，也不影响其他兄弟元素的浮动状态。
- 写在浮动元素自己身上（如
float: left; clear: both;）——没意义，它自己正处在浮动流中，clear 对它无效 - 写在非浮动的后续块级元素上才有效，例如：
<div class="float-box"></div><br><div class="clear-fix"></div>
此时给.clear-fix设置clear: both才会让它下移避开上面的浮动
父容器未触发 BFC，导致高度塌陷被误认为“clear 失效”
很多人想“清除浮动”其实是想让父容器包住内部浮动子元素（即解决高度塌陷）。但 clear 本身做不到这点——它不撑开父容器。这是最常见的误解来源。
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 正确做法是让父容器形成 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 自然失效
- 调试时可临时加背景色和边框，可视化每个元素的实际位置和尺寸
