浮动图片导致父容器高度塌陷，推荐用display:flow-root解决，其次clearfix，overflow:hidden仅适用于无溢出风险场景。
浮动图片会让父容器无法正确包裹内容，导致段落高度塌陷、文字环绕异常或后续元素错位。核心问题是浮动脱离文档流，父容器“看不见”浮动子元素的高度。
用clearfix
清除浮动
影响
给包含浮动图片的段落（或其父容器）添加clearfix类，让容器重新计算高度：
在CSS中定义：
.clearfix::after { content: ""; display: table; clear: both; }
HTML中给段落加class：
这里是文字...
这样容器就能包裹住浮动图片，段落高度恢复正常 用 overflow :hidden触发BFC 给父容器设置 overflow: hidden （或auto、scroll）也能强制形成块级格式化上下文（BFC），自动包含浮动子元素： 注意：若容器内真有溢出内容（如长单词、 绝对定位 元素），hidden可能意外裁剪，此时优先选clearfix 更现代的做法：用display: flow-root 这是专为解决此问题设计的属性，语义清晰且无副作用： 使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件 如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更 下载 立即学习 “ 前端免费学习笔记（深入） ”；文字正常换行...
兼容性良好（Chrome 64+/Firefox 62+/Edge 79+），旧版IE不支持，但可作为渐进增强方案 基本上就这些。优先推荐 display: flow-root ，次选clearfix，overflow:hidden适合快速修复且无溢出风险的场景。