使父 DIV 包含浮动的子 DIV答案

【问题标题】：Make parent DIV enclose floating chid DIVs使父 DIV 包含浮动的子 DIV
【发布时间】：2011-11-29 10:19:40
【问题描述】：

我在创建包含浮动子 DIV 的父 DIV 时遇到问题。

<div id="parent">
    <div class="child1">content</div>    
    <div class="child2">content</div>
    <div class="child3">taller content</div>
</div>

...#parent 将垂直扩展（如果以这种方式设置，则使用填充）以容纳 .child3. 如果我在 #parent 周围添加边框，它将包含所有三个子 DIV。

设计这种安排的样式以确保这种行为的最佳方式是什么？

寻找最佳实践。

【问题讨论】：

Bhesh，我正在清除每个新的父 div，因为我在页面上堆叠一个 div：一个用于导航，一个用于滑块，另一个用于三列内容，然后另一个用于更多内容。但是当我这样做并尝试显示顶部和底部边框时，我发现父级没有拉伸以覆盖子 div。

标签： html css height

【解决方案1】：

您可以简单地将float:left; 添加到父 div。

它应该强制父母的尺寸/边框包裹所有的兄弟姐妹。不确定它是否有效，但对我有用。

【讨论】：

【解决方案2】：

一个简单的

#parent {
    overflow:hidden;
}

将完成这项工作：

http://jsfiddle.net/XAbhY/

【讨论】：

【解决方案3】：

您可以在父级中添加一个“包装器”div，并在其中添加一个“clear: both”元素。检查这个 jsFiddle http://jsfiddle.net/yvVP8/

<div id="parent">
    <div id="wrapper">
        <div class="child1">content</div>
        <div class="child2">content</div>
        <div class="child3">taller content lala lala lalal lala</div>
    </div>
    <div class="clear"></div>
</div>

还有css：

#parent {
    border: 1px solid #000;
    width: 300px;
}

#wrapper .child1, #wrapper .child2, #wrapper .child3 {
    float: left;
    padding: 5px;
    width: 90px;
}

div.clear {
    clear: both;
}

【讨论】：

不需要额外的#wrapper div，您可以使用伪元素:after 并设置该元素的样式。 #parent:after {content: ''; display: block; clear: both;}
正确，但 IE7 及更早版本不支持 :after。如果这不是问题，那么:after 也一样好（甚至更好）。 Source
谢谢大家。快速提问：额外的 div，人们总是说在你的标记中避免过多的 div。但似乎有必要得到我正在寻找的东西，除非我有机会打破 IE7 和更早版本的浏览器上的布局。每页有几个额外的 div 有什么大不了的吗？
只要有必要得到你想要的结果，一个或两个额外的 div 不会有任何区别。