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示例中，我从第2个元素中删除了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属性here的定义 Float用于水平对齐对象，因此没有冲突。虽然您已经为两个元素使用了相同的类，但它对HTML DOM无关紧要。

当两个div都设置为float时，为什么不会发生冲突：left？

2 个答案: