CSS：包装器背景不会扩展到其中包含的所有div

Question

我有以下html：

<div class="wrapper">
<h1>Ipods</h1>  
                    <div class="main-topright-bottom">
                      <h1>Related Products</h1>
                      <div>Check items to add to the cart or <a href="#">select all</a>.</div>
                      <div class="relatedproduct">
                        <div class="relatedproductimage">
                          <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcR-YiokcA1U38PFCbIYklGbbqu-4E7gj6p-c4txmJjZxblroYu40A" />
                        </div>
                        <div class="relatedproducttext">
                          <div class="relatedproductheading">A red ipod nano.</div>
                          <div class="price">$140.00</div>
                          <div class="addtowishlist">Add to Wishlist</div>
                        </div>
                      </div>
                      <div class="relatedproduct">
                        <div class="relatedproductimage">
                          <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcR-YiokcA1U38PFCbIYklGbbqu-4E7gj6p-c4txmJjZxblroYu40A" />
                        </div>
                        <div class="relatedproducttext">
                          <div class="relatedproductheading">A blue ipod nano.</div>
                          <div class="price">$140.00</div>
                          <div class="addtowishlist">Add to Wishlist</div>
                        </div>
                      </div>
                    </div>
</div>

和css：

.wrapper { background: blue; }
.relatedproduct { clear: both; }
.relatedproductimage { float: left; }
.relatedproducttext { float: left; }

我想知道蓝色背景怎么没有延伸到底部div。 我做错了什么？

http://jsfiddle.net/johngoche99/C9NKP/2/

感谢。

Answer 1

默认情况下不包含浮点数。你可以通过浮动包装器或给它一个溢出属性来实现这一点。

.wrapper {
    overflow: hidden;
}

jsfiddle demo

如果您不想将溢出隐藏为副作用，请阅读http://colinaarts.com/articles/float-containment/以寻找其他（更好）替代方案。

https://developer.mozilla.org/en-US/docs/Web/CSS/Block_formatting_context

的更多信息

Answer 2

更改

 .wrapper { background: blue; }

要

 .wrapper { background: blue;overflow:hidden;}