Css div没有内容？

我仍在学习CSS，所以如果这是一个很容易解决的问题，或者在课堂上或书本上教授，请原谅我

我看到的是：

这两个灰色框是页面上方图像文件的占位符。它们位于不同的分区中，在到达页脚分区之前关闭。页脚的来源是：

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

---

因此，如果我将

minheight

设置得足够长，那么蓝色将覆盖页脚中的所有链接，这很好。但我想知道为什么我需要这么做。为什么footer div中的列不能限定为内容，以便填充背景？如果有人能将我链接到相关的术语/教程来解释这一点，我将不胜感激。我很难想出正确的词来找到我的答案。

为了让你的div

#footer

自动增长，它应该像它包含的div一样浮动。另一个选项是添加另一个不浮动且设置了

clear:both

set的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% */
}

---

添加：

溢出：隐藏至
#页脚

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

从上面的链接中添加了相关的deatil
浮动，绝对定位
元素、块容器（例如
内联块、表格单元格和
表标题）未被阻止
框、和带有“溢出”而不是“可见”的块框
值已传播到
（视口）建立新块
为其应用程序设置上下文格式
内容


在块格式化上下文中，每个
长方体的左外边缘与左侧接触
包含块的边缘（用于
从右到左格式化，右边缘
触摸）即使在存在浮点数的情况下也是如此

简言之，只要元素只包含浮动子元素，它就不会知道它包含内容，除非您告诉它，更常见的称为“清除浮动”还有其他可用的解决方案
您应该仔细阅读清除浮动。
浮动元素将崩溃。添加溢出：隐藏到您的#页脚。这里的代码示例：
解释为什么：浮动元素从正常流中删除，这就是为什么父div不展开以包含该元素。绝对定位元素也是如此。那么，为什么溢出：隐藏工作？当我阅读它的定义时，我认为它不会解决我的问题，因为它只会隐藏我的列。在这种情况下，为什么它会扩展到包含它们呢？我倾向于使用JSFIDLE回答Pno担心rachel:）-这一次，当你问到“课堂教学”时，我决定去获取块格式上下文解释的链接@rachel Lopes用相关的位更新了我的答案，希望这有助于解释为什么
溢出
是使元素包含浮点数的解决方案之一，在回答您关于@jackrugile答案的问题时
#footer {
    clear: both;
    min-height: 100px;
    background-color: #B0C4D1;
    padding-left: 8%;
    float: left;
    width: 92%; /* Together with padding-left it's exactly 100% */
}