修复父容器高度塌陷需让其重新感知浮动子元素，常用方法有：overflow:hidden、clear:both清浮动元素、伪元素::after清浮动；图文间距由margin和line-height控制，非float本身；float仍是兼容性最佳的文字环绕方案。
float 导致父容器高度塌陷怎么修
用 float 让文字绕图，最常遇到的不是布局不对，而是父容器突然“变矮”——里面元素都浮起来了，父容器以为自己空了，高度塌成 0。这时候背景色、边框、后续元素位置全乱。
修复本质就一条：让父容器重新“感知”浮动子元素的存在。常见做法有三种：
- 给父容器加
overflow: hidden或overflow: auto（最轻量，但注意会隐藏溢出内容） - 在最后一个浮动子元素后加一个清浮动元素：
<div style="clear: both"></div> - 用伪元素清浮动（推荐）：
.container::after { content: ""; display: table; clear: both; }，兼容性好，不污染 HTML
别用 float: left + display: inline-block 混搭来“碰运气”，这容易引发基线对齐问题，反而更难调。
图片和文字间距控制不住？看 margin 和 line-height
float 本身不负责间距，它只决定“谁绕谁”。真正影响图文间隙的是图片的 margin 和周围段落的 line-height、font-size。
立即学习“前端免费学习笔记（深入）”；
典型现象：文字紧贴图片底部，像被吸住；或者首行缩进异常。这是因为浮动元素会参与行内格式化上下文（IFC），而图片默认是 vertical-align: baseline，和文字基线对齐。
- 给图片加
margin-right: 12px控制右间距（绕左图时用margin-left） - 把图片设为
vertical-align: top或middle，避免基线干扰 - 段落加
margin-top: 0防止首行被浮动元素顶高
别依赖 padding 在图片上硬撑空间——那会扩大图片自身尺寸，绕排逻辑反而错乱。
现代项目里还该用 float 做文字环绕吗
能用，但要看场景。CSS Shapes（shape-outside）支持不规则绕排，不过 Safari 对 SVG 路径支持不稳定；float 是唯一所有浏览器都 100% 支持的文字环绕方案，包括 IE9+。
适用场景很明确：新闻页、博客正文、杂志风排版——要求兼容老浏览器、内容结构简单（单图 + 多段文字）、不需要响应式重排。
- 需要图片随视口缩放并保持绕排？加
max-width: 100%和height: auto，否则float会卡死宽高 - 响应式断点里取消绕排？用媒体查询把
float设为none，再单独调文字margin - 别在 Flex 或 Grid 容器里对子项用
float——布局模型冲突，行为不可预测
绕排逻辑本身简单，但一旦混入 CSS 变量、自定义属性或 Shadow DOM，float 的层叠上下文可能意外失效，这种边界情况调试起来特别费时间。
