figure浮动后超出HTML容器边框的问题求助

问题原因 #

设置了float: right的figure元素会脱离正常文档流，.bodyOfPage容器如果未处理浮动，就无法感知到浮动元素的高度，导致容器高度塌陷——边框只会包裹非浮动内容，浮动的图片自然就超出容器边框范围。

解决方案 #

以下是几种可靠的解决方法，按需选择：

方法1：用伪元素清除浮动（推荐，无额外HTML元素）

在容器的CSS中添加清除浮动的伪元素，让容器重新包裹浮动元素：

.bodyOfPage::after {
  content: "";
  display: block;
  clear: both;
}

方法2：触发容器的BFC（块级格式化上下文）

BFC容器会自动包含内部的浮动元素，推荐使用无副作用的display: flow-root：

.bodyOfPage {
  display: flow-root;
}

也可以用overflow: hidden，但注意该属性会截断容器内溢出的内容（比如下拉菜单），需根据布局场景判断。

方法3：给容器添加浮动（谨慎使用）

如果布局允许，给.bodyOfPage设置浮动，使其成为浮动容器从而包裹内部浮动元素：

.bodyOfPage {
  float: left;
  width: 100%; /* 确保容器占满宽度 */
}

这种方法可能影响后续元素布局，需测试验证。

方法4：添加清除浮动的HTML元素

在figure元素之后添加一个空div并设置清除浮动，缺点是会增加冗余HTML：

<div class="bodyOfPage">
  <figure style="float: right;">
    <img src="your-image-url" alt="图片描述">
  </figure>
  <!-- 页面其他内容 -->
  <div style="clear: both;"></div>
</div>

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