html - CSS Float 无法正常工作。如何解决这个问题？

Question

任何人都可以告诉我为什么 float 不能正常工作。为什么总计没有正确对齐。我该如何解决这个问题？抱歉我的英语不好。

HTML:

<td class="first" colspan="12" style="text-align: right">
    <div style="margin-top: 7px;"></div> Sub Total: 10000
    <div style="margin-bottom: 7px;"></div>
    <div>- Discount Amount: 12</div>
    <div style="border-bottom:1px solid #e6eaed; margin-top: 7px; width: 100px; float: right;"></div>
    <div style="font-weight: bold;margin-top: 7px; float: right;">Total: 9988</div>
    <div style="margin-bottom: 7px;"></div>
</td>

图片:

Float Issue

Answer 1

Floats 如果您不理解其中的内部逻辑并允许它们在您的 div 中不清除就逗留，那将是一团糟。您没有清除 float，这就是发生这种情况的原因! :)

<table>
<tr>
<td class="first" colspan="12" style="text-align: right">
    <div style="margin-top: 7px">df</div> Sub Total: 10000
    <div style="margin-bottom: 7px;"></div>
    <div>- Discount Amount: 12</div>
    <div style="border-bottom:1px solid #e6eaed; margin-top: 7px; width: 100px; float: right;"></div>
    <div style="clear:both"></div> .  <!-- this line is key -->
    <div style="font-weight: bold;margin-top: 7px; float: right;">Total: 9988</div>
    <div style="margin-bottom: 7px;"></div>
</td>
</tr>
</table>

Fiddle