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

Question

我需要页脚让图像浮动到左侧，更多文本（带链接的内联 ul）浮动到页脚右侧。

这里是 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/

或在页脚的结束标记前添加 div 样式 clear:both

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

Answer 2

我正要写和 Vitorino Fernandes 写的一样。

不过你也可以像下面这样写；

HTML

<footer>
<div>
<p id="p1"> Derp1</p>
<p id="p2> Derp2</p>
</div>
</footer>

CSS

 footer{
    width:100%;
    background: #113551;
    }

    footer > div{
    width:90%;
    margin:auto;
    }

    #p1{
    float:left;
    }
    #p2{
    float:right;
    }

我所做的是我只用了一个div作为<p>的容器。

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

Div floated left and div floated right causing background to disappear

html

css

background

css-float