如何在图片设置float:left时让figcaption置于图片正下方

嘿，我来帮你搞定这个figcaption乱跑的问题！

你遇到的情况很典型：当给<img>设置float:left后，图片会脱离正常的文档流，而<figcaption>作为块级元素，会试图填充图片原来的位置，但因为图片浮在左侧，它就被挤到了图片的右上方。下面给你两个简单有效的解决方案：

方案1：让整个figure容器浮动 #

这个方法适合你希望图片+标题作为一个整体左浮的场景，这样figcaption会自然跟在图片下方：

/* 给figure添加浮动，让它和内部img保持一致的布局 */
figure {
  float: left;
  margin: 0 20px 20px 0; /* 可选，调整容器的外边距，避免和其他内容挤在一起 */
}

img {
  float: left;
  margin: 15px;
}

/* 可选：让figcaption居中，视觉效果更好 */
figcaption {
  text-align: center;
  font-size: 0.9em;
  color: #666;
}

你的HTML结构不需要改动，保持原来的就行：

<figure>
  <a href="https://www.google.com"><img src="asdasd.jpg"></a>
  <figcaption>Fig1. - A view of the pulpit rock in Norway.</figcaption>
</figure>

方案2：给figcaption清除浮动 #

如果你不想让整个figure浮动，只想让figcaption回到图片下方，可以给它设置clear:left，强制它换行到浮动元素的下方：

img {
  float: left;
  margin: 15px;
}

/* 清除左侧浮动，让figcaption跑到图片下方 */
figcaption {
  clear: left;
  text-align: center;
  font-size: 0.9em;
  color: #666;
}

额外小技巧 #

如果figure内部还有其他元素，或者父容器出现高度塌陷的问题，可以给figure添加清除浮动的伪元素，确保容器能包裹住内部的浮动元素：

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

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