Question

我目前正在尝试接收CSS。到目前为止一切顺利，但是我遇到了一个问题，直到现在我都没有遇到过问题。

我有一个<div>，其中包含两个<div>。我希望“父母”<div>充当父母（自动身高等）并实际上“包含”两个孩子<div>。

我的代码：

<div class="formpair">
    <div class="formlabel formitem">
        Parent Section:
    </div>
    <div class="formcontrol formitem">
        <select>

        </select>
    </div>
</div>

我的CSS：

.formitem {
    position: relative;
    float: left;
}
.formlabel {
    width: 200px;
}
.formcontrol {
    position: absolute;
    left: 200px;
}
.formpair {
    clear: both;
    margin-bottom: 4px;
    height: auto;
    position: relative;
    display: block;
}

我尝试过“位置”和“显示”，但无济于事...... 任何帮助表示赞赏！

Answer 1

除非特别需要浮动子元素，否则我使用display:inline-block提供了不同的解决方案。我还清理了你的CSS以删除一些不必要的膨胀，这可能会在你的文档中导致层次结构问题。

您可以在此处查看此修复程序的工作示例：JSFiddle

这是适合在需要时显示的css：

.formitem {
    display:inline-block;
}

.formlabel {
    width: 200px;
}

.formpair {
    margin-bottom: 4px;
}

以下是您之前使用CSS时遇到的一些问题：

.formcontrol {
    position: absolute;
    left: 200px;
}

这条CSS被反击：

.formitem {
    position: relative;
    float: left;
}

所以.formcontrol因为反制CSS而对你的文档没有任何影响。它被反驳的原因是因为CSS是线性的并且从头到尾读取你的文档。在你的HTML中，你首先告诉CSS应用.formcontrol，然后在你给它第二个课.formitem之后立即：

<div class="formcontrol formitem">

其他CSS声明如：

height: auto;
position: relative;
display: block;

在您的示例中似乎不需要，因为默认设置对于此应用程序将完全正常工作，并且可能限制对元素的声明，这可能会导致未来CSS修改的问题。

如果您打算使用float:left，那么@rdubya会评论如何在浮动元素下正确清除修复链接：clearfix

Answer 2

父容器不会扩展到浮动子元素的高度。执行此方法的最简单方法是添加清除div以清除浮动div并使父级扩展。

HTML

<div class="formpair">
    <div class="formlabel formitem">
        Parent Section:
    </div>
    <div class="formcontrol formitem">
        <select>

        </select>
    </div>
    <div class="clear"></div>
</div>

CSS添加...

.clear {
  clear: both;  
}

http://codepen.io/anon/pen/ByzJbY

Answer 3

清除浮动的现代趋势是在容器div上使用伪元素：

以这种方式减少标记并获得clearfix-result

 .container:after {
      content:'';
      display:table;
      clear: both;
   }

此外，优化此类技术可以达到Nicolas Gallagher's micro-clearfix-hack

在此版本中，您还会找到一个:before伪元素，以避免崩溃的上边距。

这是主流最受欢迎的解决方案!!

CSS - 父div不作为父母

3 个答案: