CSS背景顏色未顯示在嵌套中<DIV>

Question

我不能讓我的黃色背景顏色顯示在3個單獨的列中顯示的嵌套div。 我究竟做錯了什么？

<div id="wrapper">
   <div class="rightside">
   Test
   </div>
   <div class="rightside">
   Test
   </div>    
   <div class="rightside">
   Test
   </div>    
</div>    

CSS下面：

#wrapper {

  background-color: yellow;

}

div.rightside {

  width: 31%;
  margin: 0 1.33333em 0 0;
  display:inline;
  float:left;   

}

這是我的jsfiddle： http ： //jsfiddle.net/yPX5Q/2/

謝謝干杯

Answer 1

添加overflow:auto到你的包裝div

#wrapper {
    background-color: yellow;
    overflow:auto;
}

jsFiddle例子

浮動內部div基本上給包裝器div沒有高度。 通過添加overflow：auto，它會帶回預期的行為。

Answer 2

你可以設置overflow:hidden; 關於父容器的http://jsfiddle.net/yPX5Q/3/或使用帶有偽元素或額外元素的clearfix方法。

有關浮動元素的更多信息，請訪問： http ： //css-tricks.com/all-about-floats/