div没有内容？

Question

我还在学习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;
}

因此，如果我将min-height设置得足够长，那么蓝色将覆盖页脚中的所有链接，这很好。但我想了解为什么我需要这样做。为什么页脚div中的列不能作为内容限定，以便背景填满？如果有人将我链接到解释这一点的相关术语/教程，我真的很感激。我无法找到合适的词语来找到答案。

Answer 1

将overflow: hidden;添加到#footer

这将使页脚成为新的block formatting context，因此它将包含其浮动的子列

从上面的链接

添加了相关的deatils

  

漂浮，绝对定位   元素，块容器（如   内联块，表格单元格和   表格标题）不是阻止   框，和阻止'溢出'而不是'可见'的框（除非那个   价值已经传播到了   viewport）建立新的块   格式化他们的上下文   内容。

     

...

     

在块格式化上下文中，每个   盒子的左外边缘接触左边   包含块的边缘（用于   从右到左格式化，右边缘   触摸）。 即使存在浮动也是如此 ....

总之，只要元素只包含漂浮的孩子，它就不会知道它有内容，除非你告诉它，通常被称为“清除浮动”，还有其他解决方案可用

Answer 2

你应该阅读清除花车。 http://www.quirksmode.org/css/clearing.html

Answer 3

浮动元素崩溃。添加溢出：隐藏到#footer。您的代码示例如下：http://jsfiddle.net/jackrugile/5HcG9/

Answer 4

为了让你的div #footer自动增长，它应该像它包含的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% */
}