div没有内容？

如何解决div没有内容？

| 我仍在学习CSS，因此，如果这是在课堂或书中容易解决或教授的内容，请原谅我。 这是我所看到的： 两个灰色框是页面上方图像文件的占位符。那些住在不同的div中，但到达页脚div之前已关闭。页脚的来源是：

<div id=\"footer\"> 
  <div class=\"column\"> 
    Column 1<br> 
    <a href=\"#\">link</a> <br/> 
    <a href=\"#\">link</a> <br/> 
    <a href=\"#\">link</a> <br/> 
    <a href=\"#\">link</a> <br/> 
    <a href=\"#\">link</a> <br/> 
    <a href=\"#\">link</a> 

    <br><br> 

    <a href=\"#\">link</a> <br/> 
    <a href=\"#\">link</a> <br/> 
    <a href=\"#\">link</a> <br/> 
    <a href=\"#\">link</a> <br/> 
    <a href=\"#\">link</a> <br/> 
  </div> 

  <div class=\"column\"> 
    Column 2<br> 
    <a href=\"#\">link</a> <br/> 
    <a href=\"#\">link</a> <br/> 
    <a href=\"#\">link</a> <br/> 
    <a href=\"#\">link</a> <br/> 
    <a href=\"#\">link</a> 

    <br><br> 

    <a href=\"#\">link</a> <br/> 
    <a href=\"#\">link</a> <br/> 
  </div> 
</div> 

这是页脚的CSS：

#footer {
    clear: both;
    min-height: 100px;
    background-color: #B0C4D1;
    padding-left: 8%;
}

.column {
    width: 200px;
    float: left;
}

因此，如果我使ѭ2足够长，则蓝色将覆盖页脚中的所有链接，这很好。但是我想了解为什么我需要这样做。为什么页脚div中的列不符合内容要求，以致背景被填满？如果有人将我链接到解释这一点的相关术语/教程，我将非常感谢。我很难找到正确的词来找到我的答案。     

解决方法

浮动元素崩溃。添加溢出：隐藏在您的#footer中。此处包含您的代码的示例：http://jsfiddle.net/jackrugile/5HcG9/     ,加：

overflow: hidden;

到

#footer

这将使页脚成为新的块格式上下文，因此它将包含其浮动的子列 从上面的链接添加了相关细节   浮动，绝对定位   元素，块容器（例如   内联块，表单元格和   表格标题）   框和带有\'overflow \'而不是\'visible \'的阻止框（除非   值已传播到   视口）建立新街区   为其设置格式上下文   内容。      ...      在块格式化上下文中，每个   盒子的左外边缘触及左边   包含块的边缘（用于   从右到左格式化，右边缘   触摸）。即使有浮子也是如此.. 简而言之，只要元素只包含浮动子元素，除非您告诉它，否则它不会知道它的内容，通常称为“清除浮动”，还有其他解决方案     ,您应该阅读清除浮球的信息。 http://www.quirksmode.org/css/clearing.html     ,为了使div 4 automatically自动增长，它应像其所包含的div一样浮动。另一种选择是添加另一个不浮动且设置为

clear: both

的div。

#footer {
    clear: both;
    min-height: 100px;
    background-color: #B0C4D1;
    padding-left: 8%;
    float: left;
    width: 92%; /* Together with padding-left it\'s exactly 100% */
}