求助：如何在包含段落的容器内正确对齐图片？

核心问题原因 #

图片设置float:right后会脱离标准文档流，若容器未做浮动处理，会出现容器高度塌陷、无法包裹浮动元素的情况；另外如果图片宽度超过容器剩余可用空间，也会直接溢出容器边缘。

具体解决方案 #

1. 让容器包裹住浮动元素（二选一即可）

• 方案一：给容器加overflow:hidden
  这是最简单的快速解决方法，强制容器包裹内部浮动元素：

  .your-container-class {
    overflow: hidden;
    padding-right: 10px; /* 可选，避免图片贴容器右边缘 */
  }
  

  注意：如果容器内有需要显示的溢出元素（比如下拉菜单、阴影），这个方法会裁剪掉，此时建议用方案二。

• 方案二：使用clearfix清除浮动
  给容器添加clearfix类，通过伪元素清除浮动，无副作用：

  .clearfix::after {
    content: "";
    display: table;
    clear: both;
  }
  

  HTML里给容器加上这个类：

  <div class="your-container-class clearfix">...</div>
  

2. 限制图片宽度，避免溢出

给浮动图片设置最大宽度，确保它不会超过容器的可用空间，同时给图片和文字之间留间距：

.float-right-img {
  float: right;
  max-width: 40%; /* 根据布局需求调整，比如占容器40%宽度 */
  margin-left: 15px; /* 图片和左侧文字的间距 */
  margin-bottom: 10px; /* 图片和下方内容的间距 */
}

完整示例代码 #

HTML：

<div class="post-container clearfix">
  <p>
    <img src="your-image-path.jpg" alt="示例图片" class="float-right-img">
    这里是段落文本内容，Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </p>
</div>

CSS：

.post-container {
  width: 700px;
  margin: 0 auto;
  border: 1px solid #eee;
  padding: 25px;
}

.float-right-img {
  float: right;
  max-width: 35%;
  margin-left: 20px;
  margin-bottom: 10px;
}

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

内容的提问来源于stack exchange，提问作者fallenapples