html - 当两个 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 应用于一个元素时，以下 block 元素将位于它的右侧(除非另有说明)。

它们都具有 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/