html - 当我添加 float 图像时，我的文本没有位于框的顶部

Question

每当我添加 float 图像时，div 中的文本一直向下移动时出现问题。

这是html代码:

<div class="clearfix" style="border: 3px solid #4CAF50; padding: 5px;">
Lorem ipsum 
</div>

<p></p>

<div class="clearfix" style="border: 3px solid #4CAF50; padding: 5px;">
<img src="https://campingannie.com/wp-content/uploads/2014/01/wenzel- Alpine8Dome1.jpg" alt="GENERIC PIC" style="width: 200px; height: auto; float: right;">
Lorem ipsum....
</div>

<p></p>

<div class="clearfix" style="border: 3px solid #4CAF50; padding: 5px;">
<img src="https://campingannie.com/wp-content/uploads/2014/01/wenzel-Alpine8Dome1.jpg" alt="GENERIC PIC" style="width: 200px; height: auto; float: right;">
<img src="https://campingannie.com/wp-content/uploads/2014/01/wenzel-Alpine8Dome1.jpg" alt="GENERIC PIC" style="width: 200px; height: auto; float: right; clear: right;">
Lorem ipsum...
</div>

和CSS:

.clearfix::after {
content: "";
clear: both;
display: table;
}

这是一个 jsfiddle。一切正常的地方: http://jsfiddle.net/bnspz9j2/ `

但是当我执行代码时，每当我添加一个 float 的 div 时，文本就会一直向下移动。这是问题的图片。第一个框中的文本很好，当我添加 float 图像时向下移动，当我添加另一个 float 图像时再次向下移动:

我不知道问题出在哪里，这让我抓狂。任何帮助将不胜感激!

Answer 1

Sarah，如果它在 jsfiddle 中工作而不是在您的实现中工作，它可能是一个重置文件。你有什么？

因为即使我在此处的 stackoverflow 代码段中运行它，它也能正常工作。

.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

<div class="clearfix" style="border: 3px solid #4CAF50; padding: 5px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</div>

<p></p>

<div class="clearfix" style="border: 3px solid #4CAF50; padding: 5px;">
<img src="https://campingannie.com/wp-content/uploads/2014/01/wenzel-Alpine8Dome1.jpg" alt="GENERIC PIC" style="width: 200px; height: auto; float: right;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</div>

<p></p>

<div class="clearfix" style="border: 3px solid #4CAF50; padding: 5px;">
<img src="https://campingannie.com/wp-content/uploads/2014/01/wenzel-Alpine8Dome1.jpg" alt="GENERIC PIC" style="width: 200px; height: auto; float: right;">
<img src="https://campingannie.com/wp-content/uploads/2014/01/wenzel-Alpine8Dome1.jpg" alt="GENERIC PIC" style="width: 200px; height: auto; float: right; clear: right;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</div>