必须在同一语义段落内需人工指定换行位置时才用<br>，如地址、诗歌、表单提示文案；它仅作视觉断点，不创建新段落、不带间距，必须写成自闭合形式且不可包裹内容。
什么时候必须用 <br>？
只在**同一语义段落内需人工指定换行位置**时才该用 <br>，比如地址、诗歌、表单提示文案。它不创建新段落，也不带间距，只是视觉断点。
常见误用：用它模拟标题+副标题、替代列表、或给按钮文字硬切行——这会让语义混乱，后续加 text-align 或 line-height 容易出错。
正确写法必须是自闭合：<p>北京市朝阳区建国路8号<br>SOHO现代城A座</p>；<br> 不能包裹内容，也不能写成 <br></br>。
<br> 为什么有时看起来没换行？
最常见原因是父容器的 CSS 干预了文本流：
• 父元素设了 white-space: nowrap —— 这会完全禁用所有换行，包括 <br> 的效果
• 父元素是 display: flex 且未设 flex-direction: column —— Flex 布局下换行由容器控制，<br> 失效
• 父容器宽度足够容纳整行内容，即使 <br> 已生效，也无视觉位移（实际 DOM 中已换行）
• 某些 CSS 重置库（如 normalize.css）虽不改 <br> 行为，但可能影响父级 line-height 或 margin，造成错觉
比 <br> 更靠谱的换行方案
多数所谓“排版换行”需求，本质是语义或 CSS 控制不到位：
• 想分段？直接用 <p> —— 自带语义、可访问性、默认上下边距
• 后端返回带 \n 的字符串？用 white-space: pre-line + innerHTML，别手动拆字符串插 <br>
• 长 URL 或 Base64 溢出？加 overflow-wrap: break-word，不是靠堆 <br>
• 响应式场景下硬塞 <br> 极危险：小屏多空行，大屏又撑不开；CSS 方案能随视口自动调整
连续多个 <br> 是典型坏习惯
写 <br><br><br> 来“空行”，等于用胶带补墙——临时有效，但结构已失控：
• 语义上毫无意义，屏幕阅读器会念出多个“换行”
• 无法统一控制间距，改样式时得全局搜替换
• 正确做法：用 margin-bottom 控制段落间距，或用 <div> + class 做语义化分隔
• 如果真需要视觉留白，优先调 line-height 或父容器 padding，而不是靠空行堆砌
立即学习“前端免费学习笔记（深入）”；
