当两个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/