7

我有两个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 向左移动，而不是出现在第一个下方。它应该与第一个对齐到左侧。

这是示例：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/

4

5 回答 5

14

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

由于内容是浮动的，它不会影响 div 的高度。因此，第二个 div 中的内容（不是 div 本身）包裹在第一个 div 的浮动标签周围。

clear: both是可以接受的，但是如果（例如）你想将这些 div 用作两列布局的一列，它会破坏布局。

我建议div { overflow: hidden; }改为。这为 div 提供了一个新的 box-context，它不允许重叠边框，从而使浮动内容的高度对 div 的高度有贡献。

编辑：固定小提琴

于 2012-06-12T19:45:15.880 回答
7

clear:both div 完全可以使用。

于 2012-06-12T19:42:31.573 回答
5

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

于 2012-06-12T19:41:03.083 回答
4

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

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

div { clear: both }

将代码放在标签定义下。

于 2012-06-12T19:42:18.933 回答
1

我注意到，如果我们处理flex显示类型的 div，传统的解决方案可能还不够。如果你想flex在一个block下面显示一个div，即使block已经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 员工（例如我自己）有用。

于 2018-08-01T09:32:57.347 回答