Question

我正在尝试构建一个在页面中间有三个浮动列的网站。我有一个容器包裹在外面，但它不会完全延伸。有什么我做错了吗？

由于

 <!DOCTYPE html>
 <html>
 <head>
    <title></title>
       <link rel="stylesheet" type="text/css" href="style/style.css">
 </head>
 <body>
     <div id="container">
         <div id="header">
             <div id="navbar"></div>
         </div>
         <div id="topper">This is the Topper</div>
         <div id="colone">This is column one</div>
         <div id="coltwo">This is column two</div>
         <div id="colthree">This is colum three</div>
         <div id="footer">This is the footer</div>
     </div>
 </body>
 </html>

 @charset "utf-8";
/* CSS Document */
#container
{
    background-color:#CCC;
    min-height:100%;
}
#header
{
    background-color: #000;
    width:100%;
    float:left;
}
#navbar
{
    background-color: #FFF;
    border-radius: 10px;
    height:75px;
    width:70%;
    margin: 0 auto;
    margin-top:10px;
    margin-bottom:10px;
    border-radius:10px;
}
#topper
{
    background-color:#000;
    height: 175px;
}
#colone
{
    background-color:#FFF;
    float:left;
    margin-left:15px;
    margin-top:-20px;
    height:150px;
}
#coltwo
{
    background-color:#FFF;
    float:left;
    margin-left:15px;
    margin-top:-20px;
    height:150px;
}
#colthree
{
    background-color:#FFF;
    float:left;
    margin-left: 15px;
    margin-top:-20px;
    height:150px;
}

#footer
{
}

Answer 1

你需要clear你的浮动。这就是它的样子。

http://jsfiddle.net/ZT59d/

<div id="container">
    <div id="header">
        <div id="navbar"></div>
    </div>
    <div id="topper">This is the Topper</div>
    <div id="colone">This is column one</div>
    <div id="coltwo">This is column two</div>
    <div id="colthree">This is colum three</div>
    <div class="clear"></div>
    <div id="footer">This is the footer</div>
</div>

#container {
    background-color:#CCC;
    min-height:100%;
}
#header {
    background-color: #000;
    width:100%;
    float:left;
}
#navbar {
    background-color: #FFF;
    border-radius: 10px;
    height:75px;
    width:70%;
    margin: 0 auto;
    margin-top:10px;
    margin-bottom:10px;
    border-radius:10px;
}
#topper {
    background-color:#000;
    height: 175px;
}
#colone {
    background-color:#FFF;
    float:left;
    margin-left:15px;
    margin-top:-20px;
    height:150px;
}
#coltwo {
    background-color:#FFF;
    float:left;
    margin-left:15px;
    margin-top:-20px;
    height:150px;
}
#colthree {
    background-color:#FFF;
    float:left;
    margin-left: 15px;
    margin-top:-20px;
    height:150px;
}

.clear
{
    clear:both;
}
#footer {
}

如果您不介意，我会就如何改进您的代码向您提供一些建议。

首先，您使用的是HTML5，但您并未使用某些新元素。让我们替换它们。

<header>
    <nav></nav>
</header>
<main>
    <div id="topper">This is the Topper</div>
    <div id="colone">This is column one</div>
    <div id="coltwo">This is column two</div>
    <div id="colthree">This is colum three</div>
    <div class="clear"></div>
</main>
<footer>This is the footer</footer>

您还使用ID来处理所有事情。相信我，你不想这样做。实际上，你应该谨慎使用ID。我现在唯一一次使用id是我需要使用javascript定位的东西。

<header>
    <nav></nav>
</header>
<main>
    <div id="topper">This is the Topper</div>
    <div class="column">This is column one</div>
    <div class="column">This is column two</div>
    <div class="column">This is colum three</div>
    <div class="clear"></div>
</main>
<footer>This is the footer</footer>

这是你新css的样子。

body {
    background-color:#CCC;
    min-height:100%;
}
header {
    background-color: #000;
    width:100%;
    float:left;
}
nav {
    background-color: #FFF;
    border-radius: 10px;
    height:75px;
    width:70%;
    margin: 0 auto;
    margin-top:10px;
    margin-bottom:10px;
    border-radius:10px;
}
#topper {
    background-color:#000;
    height: 175px;
}
.column {
    background-color:#FFF;
    float:left;
    margin-left:15px;
    margin-top:-20px;
    height:150px;
}
.clear {
    clear:both;
}

我离开了#topper，因为它很不寻常。我很难准确地说出你用它来实现的目标。

这里的fiddle包含所有内容。

Answer 2

解决此问题的简便方法是添加此类CSS规则：

#footer
{
    clear: both;
}
#container {
    overflow: hidden;
}

DEMO

显然，您在理解float属性的工作原理时遇到了一些问题。你应该仔细研究它。特别是我建议查看clearfix hack。

CSS布局不扩展包装器

2 个答案: