如何阻止浮动图片（float image）与HR元素相邻排列？

问题核心是浮动元素脱离了正常文档流，导致hr元素无法识别浮动图片的占位，从而出现相邻或重叠的情况。下面提供两种简单有效的解决办法：

方法1：给HR添加清除浮动样式 #

直接在CSS中为hr设置clear: both，强制hr元素在左右浮动元素的下方显示：

p {
  font-family: serif;
  text-indent: 100px;
  text-align: justify;
}

img {
  width: 200px;
  float: right;
  padding: 15px;
  max-width: 25%;
}

hr {
  clear: both;
}

修改后的HTML保持不变：

<img src="https://upload.wikimedia.org/wikipedia/en/thumb/0/03/Flag_of_Italy.svg/255px-Flag_of_Italy.svg.png" alt="italy flag">
<h2>Lorem Ipsum</h2>
<p>Dolor Sit Amet</p>
<hr>

方法2：插入清除浮动的占位元素 #

如果不想修改hr的全局样式，可以在hr标签前插入一个专门清除浮动的元素：

<img src="https://upload.wikimedia.org/wikipedia/en/thumb/0/03/Flag_of_Italy.svg/255px-Flag_of_Italy.svg.png" alt="italy flag">
<h2>Lorem Ipsum</h2>
<p>Dolor Sit Amet</p>
<div style="clear: both;"></div>
<hr>

两种方法都能让hr自动避开浮动图片，正常显示在内容下方。

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