CSS Float无法正常工作。怎么解决这个？

Question

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

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