问题现象与原因解析
浮动引起的高度塌陷现象
在网页布局中，当图片设置为 float: left 或 float: right 时，母容器不再像普通文档流那样垂直扩展，出现高度塌陷的现象。浮动图片不占据常规文档流的高度，导致后续段落直接紧贴浮动区域，从而产生段落高度异常的效果。
针对这类问题，本文聚焦于：“CSS浮动图片导致段落高度异常怎么办？用块级容器包裹图片并借助clearfix/overflow快速解决”，并进一步阐述可选的两种方案。
为什么会影响段落高度
核心原因在于浮动元素脱离文档流，父容器不会因此自动扩高，导致后续内容的排列失衡。父容器高度不包含浮动子元素，从而让段落的布局变得不稳定。
另外，浮动图片可能在文本旁边产生环绕效果，文本环绕与段落边界错位，也会让段落高度看起来异常。
解决思路概览
核心思路：将图片放入块级容器并控制浮动行为
通过将图片包裹在一个块级容器中，可以为图片提供独立的参照上下文，从而让父容器正确地计算高度。
在配合 clearfix 或 overflow 时，可以快速解决浮动带来的高度异常问题，确保段落与图片的排版关系稳定。
两种常用的技术路线
第一种路线是使用 clearfix 让容器包含浮动子元素；第二种路线是通过给容器设置 overflow 属性来建立新的块格式化上下文。
具体实现：块级容器+清除浮动
方案A：使用 clearfix 让容器清除浮动
在图片外层包裹一个块级容器，并在容器后追加一个伪元素来实现 clearfix，这样容器就能正确包含 floated img。
代码示例展示了如何在实际页面中应用，确保图片自适应宽度并且段落的高度随之稳定。
/* 方案A：使用 clearfix */
.image-wrap { display:block; }
.image-wrap img { float:left; max-width:100%; height:auto; }
.image-wrap:after { content:""; display:table; clear:both; }方案B：通过 overflow 建立包含块
另一种做法是在块级容器上直接使用 overflow: hidden 或 overflow: auto，从而创建一个新的块格式化上下文，包含浮动子元素。
这种方法的实现简单直观，且对现代浏览器具有较好的兼容性。
/* 方案B：使用 overflow */
.image-wrap { display:block; overflow:hidden; }
.image-wrap img { float:left; max-width:100%; height:auto; }兼容性与注意事项
跨浏览器的考虑要点
清除浮动的技术在大多数浏览器中都能正常工作，包括旧版 IE，使用 clearfix 技巧典型地能保证布局一致性。
如果使用 overflow，需要注意某些浏览器对滚动条和截断的表现，尤其在极窄屏幕上可能有细微差异。
对图片与文本的无干扰排版
无论采用哪种方法，都应确保图片采用 display: block 或图片本身为块级，避免多余的行内空白影响段落高度。
另外，若图片需要自适应宽度，设置 max-width: 100% 与 height: auto 是常用且有效的做法。
