Question

我想创建一个以浏览器为中心，有边框的包装器，它围绕各种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>

Answer 1

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

overflow: auto

：）

如果您希望包装器在高度上自动扩展，那么应该执行此操作。

Answer 2

您可以添加类似＆lt; br style =“clear：both”/＆gt;作为包装器中的最后一个元素，强制它包裹在内容流之外的元素。

<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-->

Answer 3

您需要在clear:both之后添加div的元素。

Demo

Answer 4

我会在下面的psuedo类之后使用：似乎更明显的是应该发生什么，而不像浏览器的怪异。我确定溢出的解决方案正式应该有效。

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

包含浮动div的包装器问题

4 个答案: