Div向左浮动，div向右浮动，导致背景消失 [英] Div floated left and div floated right causing background to disappear

问题描述

我需要页脚有一个浮动在左边的图片和一些浮动在页脚右边的文本（内联 ul 带链接）。

这里是CSS& HTML：

< pre class =snippet-code-css lang-css prettyprint-override> footer {clear：both; background：＃113551;宽度：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>  

ish，但是页脚的背景颜色不会显示。为什么不？什么是最好的方法来解决这个问题？它不必一定是这样的;我没有任何运气得到这个位置相对和绝对。

解决方案

清除 float 使用 overflow：hidden

demo - http://jsfiddle.net/b0v33rc0/1/

或添加 c> c> p> demo - http://jsfiddle.net/b0v33rc0/2/

I need the footer to have an image floated to the left and some more text (an inline ul with links) floated to the right of the footer.

Here is the 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>

It works-ish, however the background color of the footer does not show up. Why not? what is the best way to fix this? It doesn't have to necessarily be exactly like this; I didn't have any luck getting this with position relative and absolute either.

解决方案

for clearing float use overflow:hidden

demo - http://jsfiddle.net/b0v33rc0/1/

or add a div with styles clear:both before closing tag of the footer

demo - http://jsfiddle.net/b0v33rc0/2/

这篇关于Div向左浮动，div向右浮动，导致背景消失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！