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>的容器。