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/

现在如果我插入一个 clear：both; 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的高度。

修改：Fixed fiddle

Answer 2

明确：两个div都可以完全接受使用。

Answer 3

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

Answer 4

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

如果我理解您的问题，解决方法是将clear: both添加到您的div：

div { clear: both }

将代码放在标签定义下。

Answer 5

我注意到，如果我们要处理flex显示类型的div，那么常规解决方案可能不够用。如果要在块下面显示flex div，即使使用了width: 100%或clear: both块，flex仍将显示在其侧面。解决方案是将flex元素的宽度也指定为100％，例如：

CSS：

.top_div {
    display: block; 

}

.bottom_div {
    display:    flex;
    justify-content: center;    
    width:  100%; /*key*/
}

HTML：

<div class="replies_container">Your block content</div>
<div class="flex_container">
Your flex content</div>

旁注：也许这不是OP的问题的直接解决方案，但对可能偶然发现它的未来Google员工（例如我自己）有用。

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

5 个答案: