包含浮动 div 时的包装问题答案

【问题标题】：Wrapper question when containing floating divs包含浮动 div 时的包装问题
【发布时间】：2010-01-15 16:26:13
【问题描述】：

我想创建一个以浏览器为中心、有边框的包装器，它可以在各种 div 周围自动展开高度。当使用浮动来保持 div 内联时，包装器会在第一个 div 之后停止。善良，这可能是也可能不是正确的方法，但这就是我在这里的原因。

这是一个简单的例子。

<head>

<style type="text/css">
<!--
#wrapper {
height: 100%;
width: 800px;
border: 1px solid #000;
margin-right: auto;
margin-left: auto;
}
#header {
height: 100px;
width: 800px;
}
#column1 {
width: 300px;
height: 400px;
float: left;
}
#column2 {
height: 400px;
width: 300px;
float: left;
}
#navbox {
float: left;
width: 200px;
height: 400px;
}
-->
</style>

</head>

<body>

<div id="wrapper">

<div id="header">test header</div>
<div id="navbox">test navbox</div>
<div id="column1">test column1</div>
<div id="column2">test column2</div>

</div><!--Close_wrapper-->
</body>
</html>

【问题讨论】：

标签： css html wrapper

【解决方案1】：

一句中包含float和wrap的问题的答案通常是

overflow: auto

如果您希望包装器自动扩展高度，应该这样做。

【讨论】：

迄今为止我发现的最优雅的解决方案。谢谢！
很好的答案，并且有一个简洁的经验法则来引导！谢谢。

【解决方案2】：

您可以添加类似
之类的内容作为包装器中的最后一个元素，以强制它围绕内容流之外的元素。

<div id="wrapper">

<div id="header">test header</div>
<div id="navbox">test navbox</div>
<div id="column1">test column1</div>
<div id="column2">test column2</div>

<br style="clear:both" />

</div><!--Close_wrapper-->

【讨论】：

【解决方案3】：

您需要在divs 之后添加一个带有clear:both 的元素。

Demo

【讨论】：

【解决方案4】：

我会使用 :after 伪类，如下所示。应该发生的事情似乎更明显一些，而不像浏览器的怪异。我确定溢出解决方案不是官方应该起作用的。

#wrapper:after {
    clear:both;
    display: block;
    content: " ";
}

【讨论】：