clear: both 作用于紧随浮动元素之后的块级元素，强制其避开所有浮动区域以中断文本环绕；它不作用于浮动元素自身，且需配合响应式重置避免错位。
为什么 clear: both 能打断文本环绕
浮动元素脱离文档流后，后续的内联内容（比如段落文字）会自动绕开它左侧或右侧的空间——这叫“字围现象”。但很多时候你并不想要环绕，而是希望下一段文字从浮动元素下方完整开始。这时 clear: both 的作用就不是“清除浮动”，而是“强制让当前元素避开所有浮动区域”，从而中断环绕路径。
clear: both 必须加在谁身上
它必须加在**紧接在浮动元素之后、且你不希望被环绕的那个块级元素上**，而不是浮动元素自己。常见误操作是给图片加 clear，这完全无效。
- ✅ 正确：给后续的
<p>或<div>加clear: both - ❌ 错误：给
<img>加clear: both（它自己已经浮走了，clear 对它没意义） - ⚠️ 注意：如果浮动元素后面跟的是纯文本节点（没有包裹标签），
clear无法直接作用——必须先用块级容器包住那段文字
替代写法比 clear: both 更安全的场景
当浮动元素高度不固定，或父容器需要自适应高度时，单纯靠 clear: both 可能导致布局断裂。此时更推荐：
- 给浮动元素的**父容器**触发 BFC：
overflow: hidden或display: flow-root（现代写法） - 用伪元素清除：
.container::after { content: ""; display: block; clear: both; }，避免额外 DOM 节点 - 若只是想阻止某一段文字环绕，且不想影响后续结构，用
overflow: hidden直接加在该段落上（如p { overflow: hidden; }），比clear更轻量
响应式断点里容易漏掉的细节
在小屏幕下取消浮动（float: none）时，clear 属性不会自动失效。如果你写了媒体查询但没重置 clear，可能造成意外空白或错位。
立即学习“前端免费学习笔记（深入）”；
- 务必同步覆盖：
@media (max-width: 768px) { .text-block { clear: none; } } -
clear不继承，也不会被float: none自动抵消 - 检查 DevTools 中 computed 样式，确认
clear值在断点后是否真的变成了none
clear 的作用对象错位，以及响应式中未同步清理 clear 值。这两处一出问题，布局就不是“换行不到位”，而是整个区块错位或留白异常。 
