愚蠢的HTML放置问题：强制一个元素低于另一个元素？

Question

我的基本布局是：

<table>
...
</table>
<table>
...
</table> // There's actually five tables, but that's irrelevant
<img .../>
</body>

我正在尝试将图像打成一个页脚，在所有表格下方，但我能管理的最好的是它会卡在表格的右侧（我的屏幕很大，所以它可能会在下面环绕适合你的桌子，但不适合我）或者我可以通过使用position：absolute来让它在桌面上浮动。我不能为了我的生活而把图像强行包裹在桌子下面。

我尝试将图像包装在div中，并将各种属性/属性组合添加到div中，但就像我说的那样，它们都会产生上面列出的两个不良结果中的一个。

有人可以提供某种解决方案吗？

我已经看过其他一些SO问题，比如How to force div to appear below not next to another?，但我根本不理解这个解决方案（如何浮动：左边强迫某些东西低于其他东西？）而且我也不相信该解决方案需要额外的包装器<div>。

Answer 1

<div>
<table>
...
</table>
<table>
...
</table>

</div>
<div style="clear:both;">
<img .../>
</div>

</body>

或使用css。并为img或div标签创建样式。

Answer 2

在包含表格的最后一个div之后，只需添加：

<div style="clear:both"></div>

它的工作原理:)你的div正在使用float: left因此你必须设置一个div来告诉它停止所有这些浮动！

Answer 3

将以下样式应用于图像。

<img style="display:block;clear:both;" .../>

Answer 4

你可以用css做到这一点。在图像中添加一个类，然后将其更改为阻止或清除浮动。例如，

HTML：

<img src="" class="my-img" />

CSS：

.my-img
{
display:block;
/*Or*/
clear:both;
}