应优先使用 overflow: hidden 或 display: flow-root 触发 BFC 来解决浮动导致父容器高度塌陷；多图环绕错位需统一图片尺寸与下边距；清除浮动推荐 clearfix 伪元素法，现代项目可用 display: flow-root。
浮动图片导致父容器高度塌陷怎么办
当给 常见错误做法是给父容器硬写 典型场景：文章内嵌几张缩略图，希望文字环绕左侧图片，但第二张图紧贴第一张底部右侧，造成“阶梯式”错乱。这是因为浮动元素会尽可能高地贴靠前一个浮动元素的边缘，而不是按行对齐。 解决关键不是清浮动，而是控制浮动元素的垂直节奏： 立即学习“前端免费学习笔记（深入）”； 单独用 经典 clearfix 方案本质是：在父容器末尾插入一个“看不见但占位”的块级元素，并让它清浮动： 注意点： 有必要，但定位要准：不是为了日常布局，而是为了维护老项目、调试意外浮动、或处理某些 CSS-in-JS 库动态插入的浮动元素（如部分富文本编辑器输出）。 真正该警惕的是“习惯性浮动”——比如给按钮加 浮动清除本身不难，难的是判断“此刻到底该不该用浮动”。多数图片展示场景，现在真没必要绕路了。float: left 或 float: right 后，父元素（比如 height 或用空标签加 clear: both，既不健壮也不语义化。
overflow: hidden 或 overflow: auto（触发 BFC），简单有效，兼容到 IE6+display: flow-root（Chrome 58+/Firefox 59+），专为此类场景设计，不影响布局行为：增加无意义 DOM，维护成本高，且在 flex/grid 布局中失效多图左对齐排列时文字环绕错位怎么调
margin-bottom（如 1em），让文字有足够间隙换行max-width: 100% + 固定 height 配合 object-fit: cover 统一视觉基线display: inline-block 或更稳妥的 display: grid（grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))）
清除浮动该用
clear 还是 ::after 伪元素
clear: both 必须作用于浮动元素之后的**兄弟元素**，而实际中常需要“在父容器内部收尾”，此时直接在父容器上加 clear 无效（它只对同级元素生效）。.clearfix::after {
content: "";
display: table;
clear: both;
}
display: table 是为了兼容 IE6/7；现代项目可用 display: block
content: ""，否则伪元素不渲染zoom: 1（IE hack），说明旧项目还在用 hasLayout 兼容方案，建议逐步替换为 display: flow-root
Flex/Grid 已普及，还有必要学浮动清除吗
float: right 实现右对齐，这在响应式下极易失控。现代等价写法更可靠：
margin-left: auto（flex 容器内）display: grid 配合 grid-template-areas 显式定义区域display: grid + gap + aspect-ratio（Chrome 114+）比浮动 + media query 简洁得多
