使用float属性定位元素

Question

为什么here div与列表位于同一行？

HTML

<ul id="lst">
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
<div id="id2">Kuku</div>

CSS

#lst li {
       float: left;
}

Answer 1

因为你将“float：left”应用于每一个<li>，所以从左到右依次“排列”。

使用#lst {（而不是#lst li {）会使列表从上到下显示，旁边显示DIV。 （如果那不是您想要的，请使用CSS clear来摆脱浮动。）

在Google上搜索“css float”以了解有关定位元素的更多信息。

Answer 2

因为每个列表项都向左浮动，当你向左浮动某个项目时，下一个项目将在其右侧结束。

基本上，由于第二个LI结束到第一个LI的右边，DIV最终到达列表的右侧。

如果要将它们分开，请在列表和DIV之间添加。

<div style="clear: both;">Div</div>

Answer 3

#id2 {
    clear:both;
}

应该修理它。

Answer 4

如果你给div一些样式，它的外观如下：

http://jsfiddle.net/9LrUs/

为避免这种情况，您需要div一个clear:both。这是一个例子：

<强> HTML：

<ul id="lst">
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
<div id="id2">Kuku</div>

<强>样式：

#lst li {
       float: left;
}

#id2 {
    clear:both;
}