css - 为什么一个div比另一个div高？

Question

我有这两个 div 向左浮动，但由于某种原因，其中一个比另一个高，这是什么原因造成的？

<style type="text/css">
    ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    .address-summary {
        float: left;
        margin: 10px;
    }
</style>

<h2>CheckoutSummary</h2>

<div>
    <div class="address-summary">
        Shipping To:
        <ul>
            <li>@Model.ShippingAddress.Street</li>
            <li>@Model.ShippingAddress.City, @Model.ShippingAddress.State @Model.ShippingAddress.Zip</li>
            <li>@Html.DisplayFor(m => m.ShippingAddress.Phone1)</li>
        </ul>
        <div class="clear-fix"></div>
    </div>
    <div>
        Billing To:
        <ul>
            <li>@Model.BillingAddress.Street</li>
            <li>@Model.BillingAddress.City, @Model.BillingAddress.State @Model.BillingAddress.Zip</li>
            <li>@Model.BillingAddress.Phone1</li>
        </ul>
        <div class="clear-fix"></div>
    </div>
</div>

Answer 1

.address-summary 周围有一个 margin，它将 div 向下推。