html - div 向左浮动，div 向右浮动导致背景消失

Question

我需要页脚将图像 float 到左侧，并将更多文本(带链接的内联 ul) float 到页脚右侧。

这是 CSS 和 HTML:

footer {
   clear: both;
   background: #113551;
   width: 90%;
   margin: 0 auto;
}
.left-foot {
   float: left;
}
.right-foot {
  float: right;
}

<footer>
   <div class="left-foot">
      <p> derp 1</p>
   </div>

   <div class="right-foot">
      <p>derp2</p>
   </div>
</footer>

它可以正常工作，但是页脚的背景颜色没有显示出来。为什么不？解决此问题的最佳方法是什么？它不一定必须完全像这样；我也没有运气通过相对位置和绝对位置得到这个。

Answer 1

清除 float 使用overflow:hidden

演示 - http://jsfiddle.net/b0v33rc0/1/

或者在页脚的结束标签之前添加一个样式为clear:both的div

演示 - http://jsfiddle.net/b0v33rc0/2/