CSS如何实现图片右对齐且不切入底部破坏布局

问题现象 #

使用float: right实现图片右对齐时，若图片旁文本高度小于图片高度，会出现浮动图片覆盖下方<hr/>等元素的布局错乱，移除浮动属性则无法实现文字环绕效果，问题效果如下：

问题原因 #

该问题是CSS浮动的默认特性导致：设置float属性的元素会脱离普通文档流，未做浮动清除的父容器计算高度时，不会将浮动元素的高度纳入计算，出现高度塌陷，后续的页面元素就会按照无浮动的位置排布，被浮动图片覆盖。

修复方案 #

不需要移除float: right属性，仅需对包裹图片的父容器做浮动清除处理，即可同时保留右对齐+文字环绕效果，且不会出现后续元素被覆盖的问题。

方案1：父容器设置overflow触发BFC（最适配inline style写法） #

直接给包裹图片和图注的div添加overflow: auto样式，触发块级格式化上下文，父容器会自动包裹内部浮动元素，从根源解决高度塌陷问题，代码示例：

<div style="overflow: auto;">
  <img src="ubuntu.png" style="float: right; margin: 0 0 1rem 1rem;">
  <p>Image caption</p>
</div>
<p>Some lovely blog post text.</p>
<hr/>

优化提示：给右浮动的图片添加左侧、下侧外边距，可以避免图片和环绕文字贴得过近，提升阅读体验。

方案2：clearfix清除浮动（通用无副作用方案） #

如果后续容器内需要放置超出容器边界的内容（例如下拉弹出菜单），担心overflow: auto会裁剪超出内容，可以使用通用clearfix方案清除浮动，代码示例：

<!-- 全局可复用clearfix样式 -->
<style>
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}
</style>

<div class="clearfix">
  <img src="ubuntu.png" style="float: right; margin: 0 0 1rem 1rem;">
  <p>Image caption</p>
</div>
<p>Some lovely blog post text.</p>
<hr/>

避坑提醒：不要直接给<hr/>标签加clear: both临时修复，该写法只能解决当前hr被覆盖的问题，如果后续在图片和hr之间新增其他内容，依然会出现布局错乱，属于治标不治本的写法。

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