如何将div定位在另一个div之下

Question

我有两个div:

<div><label for="1">Some really loooong text... Which breaks the second div. Which then appears shifted to the right.</label><input type="text" id="1" name"1"></div>
<div><label for="2">Shifted.</label><input type="text" id="2" name"2">

我使用以下css浮动输入文本字段左侧的标签:

label{
    width:200px;
    float:left;
}?

第二个div向左移动而不是出现在第一个div之下.它应该作为第一个对齐到左边.

这是一个例子:http://jsfiddle.net/qh37Y/

现在,如果我插入一个明确的:两个; div它有效,但这是最好的做法吗？

.clearer {
    clear:both;
}
<div class="clearer"><label for="2">Shifted.</label><input type="text" id="2" name"2">?

见这里:http://jsfiddle.net/ywUx6/

Answer 1

看起来这实际上是div的高度问题.

由于内容是浮动的,因此不会影响div的高度.因此,第二个div中的内容(不是div本身)包裹着来自第一个div的浮动标签.

clear: both 是可以接受的,但是如果(例如),你想将这些div用作两列布局的一列,则会破坏布局.

我建议div { overflow: hidden; }改为.这为div提供了一个新的盒子上下文,它不允许重叠边框,从而使浮动内容的高度有助于div的高度.

编辑:固定小提琴

Answer 2

一个明确的:两个div都是完全可以接受的.

Answer 3

是的，clear: both通常是您最终使用的。请注意，您也可以使用clear: leftetc

Answer 4

首先，你不能使用以数字开头的标识符 - 只是说'；）

如果我理解你的问题，解决方案是添加clear: both到你的 div 中：

div { clear: both }

将代码放在标签定义下。