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/

或添加样式为clear:both的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>的容器。