當兩個div都設置為float：left時，為什么不發生沖突？

Question

<div class="header">

<div class="contact half">
    <dl>
        <dt>Email</dt>
        <dd>z@srgbethet.com</dt>

        <dt>Phone</dt>
        <dd>+456 333 444</dd>

        <dt>Website</dt>
        <dd>kkkk.com</dd>
    </dl>
</div>

<div class="skills half">
    <ul>
        <li>Quantum Accelerators</li>
        <li>dfeerfbe</li>
        <li>Parachuting</li>
        <li>Photon Cannons</li>
    </ul>
</div> 
</div>

CSS代碼：

.half {
 float: left;
 width: 50%;
 }

最終結果是，聯系人div和技能div都可以很好地並排放置。 由於兩個對象都遵循float:left屬性，為什么它沒有沖突？

Answer 1

當對元素應用float:left ，以下塊元素將位於其右邊（除非另有說明）。

它們都具有float:left的事實是無關緊要的，只是因為您的第一個元素contact half具有float:left

在我創建的這個jsfiddle示例中，我從第二個元素中刪除了half ，它們仍然並排放置：

http://jsfiddle.net/Curt/nV5Sx/

如果您不希望它們並排放置，則可以clear:left第二個元素：

http://jsfiddle.net/Curt/nV5Sx/1/

我給您的印象是您可以了解更多有關float:left工作原理的信息。 有關此樣式屬性的更多信息，請參見此便捷教程：

http://css-tricks.com/all-about-floats/

Answer 2

在此處檢查 float屬性的定義Float用於水平對齊對象，因此沒有沖突。 盡管您對兩個元素使用了相同的類，但對於HTML DOM來說並不重要。