0

我有以下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/

谢谢。

4

2 回答 2

2

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

.wrapper {
    overflow: hidden;
}

jsfiddle 演示

如果您不想将溢出作为副作用隐藏，请阅读http://colinaarts.com/articles/float-containment/了解另一种（更好的）替代方案。

更多信息，请访问https://developer.mozilla.org/en-US/docs/Web/CSS/Block_formatting_context

于 2013-06-22T13:24:48.867 回答
1

改变 

 .wrapper { background: blue; }

到

 .wrapper { background: blue;overflow:hidden;}
于 2013-06-22T13:29:58.803 回答