为什么我的背景颜色结束了？

Question

我正在为网页创建一个页脚，出于某种原因，一旦我开始填充整个div，我就无法获得背景颜色。

EXAMPLE

.widefooter {
    background-color:#EFEFEF;
    width:100%;
    font-size:12px;
}

在<hr>下添加“链接”后，页脚的背景颜色刚刚结束，即使链接嵌套在页脚div中，也不会在页脚div之后。

这就是我得到的：

这就是我想要实现的目标：

Answer 1

将overflow:hidden添加到.widefootercontent。

浮动元素不会影响父容器的高度，除非使用此overflow属性专门执行此操作。

Answer 2

这是浮动元素的问题。需要通过专门为清除花车而创建的第三个元素清除。

<强> HTML

<div class="parent">
   <div class="child"></div>
   <div class="child"></div>
   <div class="child"></div>
   <div class="clearFloat"></div>  <!-- for clearing above float elements -->
</div>

<强> CSS

.clearFloat {
    clear: both;
}

我总是喜欢添加最后一个子元素来清除浮点数而不是使用overflow :hidden属性，因为如果子元素需要使用position：absolute而显示在父元素之外，那么overflow：hidden将隐藏子元素。这对于更大的项目来说真的很令人沮丧。

<强> Working Fiddle