figure右浮动异常：图片超出<main>元素边界问题求助

给你几个实用的调整方案，直接上手试就行：

方案1：给main容器处理浮动溢出 #

浮动元素会脱离文档流，导致main容器没把它纳入布局计算范围，给main加以下属性：

main {
  overflow: hidden; /* 直接把溢出内容包含在容器内，也可以用auto，需要时会出滚动条 */
}

如果要兼容更老的浏览器，也可以用清除浮动的伪元素写法：

main::after {
  content: "";
  display: table;
  clear: both;
}

方案2：限制figure和图片的宽度 #

大概率是图片本身宽度超过了main的可用空间，给figure和图片加宽度限制：

figure {
  float: right;
  margin: 0 0 1rem 1rem; /* 给图片左、下方加间距，避免和文本贴得太近 */
  max-width: 40%; /* 按布局需求调整比例，比如占main宽度的40% */
}
figure img {
  width: 100%; /* 让图片自适应figure的宽度 */
  height: auto; /* 保持图片比例不变 */
}

方案3：给main加内边距 #

如果main没有内边距，浮动元素容易贴到容器边界外，加内边距留缓冲：

main {
  padding: 0 1rem; /* 左右各加1rem内边距，数值按需调整 */
}

你说放大后显示正常，是因为缩放时浏览器的布局计算逻辑有差异，上面的方案应该能解决100%缩放时的溢出问题。

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