br标签仅用于纯换行，不创建段落、无语义、无默认间距；正确场景限于地址块、诗歌歌词、表单label说明；滥用会导致响应式错位、可访问性问题及RTL异常；清理应优先禁用CSS检查结构，再用脚本删除孤立br。
br 标签只解决“这里要折行”，不是排版工具
它不创建新段落、不加语义、不带默认间距，就是让后续文字从下一行开始。用错地方，比如在标题后塞三个 <br> 来“空两行”，结果响应式下错位、屏幕阅读器卡顿、打印时断行异常——这不是 bug，是误用。
真正该用的场景非常有限：
• 地址块中每行一个物理项（如 <p>北京市朝阳区XX路1号<br>邮编:100020</p>）
• 诗歌或歌词原文需保留原始换行
• 表单 <label> 后紧跟说明文字且必须视觉分隔（但更推荐用 display: block 或 <div>）
连续多个 <br> 几乎总是结构或 CSS 问题
看到 <br><br><br>，第一反应不该是“加个 class 控制间距”，而是检查：是不是该用 margin-bottom？是不是该把行内元素改成 display: block？是不是该用 flex 布局替代“推位置”？
常见错误现象：
• 富文本编辑器粘贴内容后，段落间莫名多空行（实际是冗余 <br>）
• SSR 渲染时被压缩工具删掉部分 <br>，导致显示塌陷
• iOS Safari 对连续垂直间距压缩更激进，桌面看着正常，手机上挤成一团
立即学习“前端免费学习笔记（深入）”；
可访问性风险比你想象中更直接
在按钮里插 <br>（如 <button>确<br>认</button>），语音合成会读作“确（停顿）认”，键盘聚焦时整个按钮仍是单焦点项，但视觉割裂，低视力用户很难建立对应关系。
更隐蔽的问题：
• 辅助技术可能跳过 <br> 后的内容，造成信息丢失
• <hr> 和 <br> 滥用会让屏幕阅读器反复播报“horizontal rule”“line break”，干扰页面结构理解
• 阿拉伯语等 RTL 语言环境下，<br> 行为不可预测，优先用块级结构替代
怎么清理无效的 <br>？别靠肉眼扫
手动清理前先禁用 CSS 查看原始结构，确认哪些 <br> 真正影响语义。浏览器控制台执行这行代码能快速干掉孤立的：document.querySelectorAll('br').forEach(br => { if (!br.previousElementSibling && !br.nextElementSibling) br.remove(); })
批量处理还要注意：
• <pre> 或 white-space: pre 环境里，<br> 和换行符效果重叠，容易多出空行
• 出现在 <p> 开头/结尾的 <br> 通常无意义
• 被包裹在空 <span> 或紧邻其他块级元素的，基本可删
<br> 再补一行 CSS，比调半天样式更省事。 
