标签不支持clear属性，所谓“”是HTML 3.2/4.01废弃写法，现代HTML5中非法且无效；其“看似有效”源于浏览器向后兼容的宽容解析，并非标准行为；应改用CSS clear、BFC（如display: flow-root）或现代布局替代。

br 标签根本没有 clear 属性

直接说结论：
标签不支持 clear 属性，HTML 规范里压根没这回事。你看到的所谓“
”是早已废弃的 HTML 3.2/4.01 旧写法，现代浏览器虽可能兼容性保留（比如 Chrome 渲染时仍会识别），但它是非法标记，W3C 验证器报错，且在 XHTML 或 HTML5 中完全无效。

真正起作用的不是
，而是浏览器对这个废弃属性的“宽容式 fallback”——它悄悄把该
当作具有清除浮动行为的元素处理，本质是历史包袱，不是设计意图。

为什么用 br clear="both" 会“看似有效”

这种写法常出现在老项目或复制粘贴的代码里，效果看起来像清除了浮动、实现了换行，原因有二：

• 浏览器引擎（如 WebKit/Blink）为向后兼容，对
、
、
做了特殊解析，内部等效于插入一个带 clear: both 的匿名块级框
• 它恰好出现在浮动元素之后、需要换行的位置，视觉上“顶开了下一行”，让人误以为是
自身的能力

但这种行为不可靠：在严格模式（）下部分浏览器可能忽略；若父容器触发了 BFC（比如设置了 overflow: hidden），它的“清除”效果甚至会失效；更严重的是，它无法响应式控制，不能配合 Flex/Grid 使用。

现代替代方案：用 CSS clear 或 BFC 容器

真正可控、标准、可维护的做法是放弃
，改用 CSS 清除或布局机制：

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

• 在需要换行的元素前加一个空标签并设 clear: both：
  （语义差，但直观）
• 给浮动元素的父容器触发 BFC，比如设置 overflow: hidden、display: flow-root（推荐，flow-root 是专为此设计的，无副作用）
• 用伪元素清除法（经典 clearfix）：.clearfix::after { content: ""; display: table; clear: both; }，然后给父容器加 class="clearfix"
• 直接迁移到现代布局：用 display: flex 或 display: grid 替代浮动，根本不需要 clear

注意：display: flow-root 是目前最干净的方案——它创建 BFC 同时不影响盒模型，也不依赖伪元素或额外 DOM 节点。

实际调试时怎么快速定位问题

如果你发现页面中某个
突然不生效，别先改它，先检查这几件事：

• 当前文档是否为 HTML5（）？是的话，clear 属性已被忽略，只是旧引擎“凑巧”还支持
• 浮动元素的父容器是否设置了 overflow: hidden 或 display: flex？这些会干扰传统清除逻辑
• 开发者工具里选中那个
，看 computed 样式里有没有 clear: both —— 很大概率没有，说明它根本没生效，只是你没注意到其他样式在起作用
• 用 outline: 1px solid red 给所有浮动元素临时加轮廓，观察布局塌陷范围，比盯着
更快定位根源

浮动布局本身已是遗留技术，
是套在遗留技术上的另一层遗留语法。真正要花时间的，不是让它“再工作一次”，而是判断：这里是否真的还需要浮动？

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！