方框
section.box-products {
拥有所有
section.box-products ul li.item {
中的元素，但即使<li>计数增加，盒子产品div的高度也不会增加。
为什么？
代码：
<section class="box-products">
<div class="large-12 columns">
<h2>
Noteworthy
</h2>
</div>
<div class="large-12 columns">
<ul class="large-block-grid-8">
<li class="item">
<img src="assets/images/item/1.jpg">
<a href="#" class="name">
Sofa Bercelli
</a>
<p>12.95</p>
</li>
<li class="item">
<img src="assets/images/item/2.jpg">
<a href="#" class="name">
Sofa Bercelli
</a>
<p>12.95</p>
</li>
<li class="item">
<img src="assets/images/item/3.jpg">
<a href="#" class="name">
Sofa Bercelli
</a>
<p>12.95</p>
</li>
<li class="item">
<img src="assets/images/item/4.jpg">
<a href="#" class="name">
Sofa Bercelli
</a>
<p>12.95</p>
</li>
<li class="item">
<img src="assets/images/item/5.jpg">
<a href="#" class="name">
Sofa Bercelli
</a>
<p>12.95</p>
</li>
<li class="item">
<img src="assets/images/item/6.jpg">
<a href="#" class="name">
Sofa Bercelli
</a>
<p>12.95</p>
</li>
<li class="item">
<img src="assets/images/item/7.jpg">
<a href="#" class="name">
Sofa Bercelli
</a>
<p>12.95</p>
</li>
<li class="item">
<img src="assets/images/item/8.jpg">
<a href="#" class="name">
Sofa Bercelli
</a>
<p>12.95</p>
</li>
<li class="item">
<img src="assets/images/item/9.jpg">
<a href="#" class="name">
Sofa Bercelli
</a>
<p>12.95</p>
</li>
<li class="item">
<img src="assets/images/item/10.jpg">
<a href="#" class="name">
Sofa Bercelli
</a>
<p>12.95</p>
</li>
<li class="item">
<img src="assets/images/item/11.jpg">
<a href="#" class="name">
Sofa Bercelli
</a>
<p>12.95</p>
</li>
<li class="item">
<img src="assets/images/item/12.jpg">
<a href="#" class="name">
Sofa Bercelli
</a>
<p>12.95</p>
</li>
<li class="item">
<img src="assets/images/item/13.jpg">
<a href="#" class="name">
Sofa Bercelli
</a>
<p>12.95</p>
</li>
<li class="item">
<img src="assets/images/item/14.jpg">
<a href="#" class="name">
Sofa Bercelli
</a>
<p>12.95</p>
</li>
<li class="item">
<img src="assets/images/item/15.jpg">
<a href="#" class="name">
Sofa Bercelli
</a>
<p>12.95</p>
</li>
<li class="item">
<img src="assets/images/item/16.jpg">
<a href="#" class="name">
Sofa Bercelli
</a>
<p>12.95</p>
</li>
<li class="item">
<img src="assets/images/item/17.jpg">
<a href="#" class="name">
Sofa Bercelli
</a>
<p>12.95</p>
</li>
<li class="item">
<img src="assets/images/item/18.jpg">
<a href="#" class="name">
Sofa Bercelli
</a>
<p>12.95</p>
</li>
<li class="item">
<img src="assets/images/item/19.jpg">
<a href="#" class="name">
Sofa Bercelli
</a>
<p>12.95</p>
</li>
<li class="item">
<img src="assets/images/item/20.jpg">
<a href="#" class="name">
Sofa Bercelli
</a>
<p>12.95</p>
</li>
</ul>
</div>
和CSS：
section.box-products {
margin-top: 24px;
padding-bottom: 20px;
/*border: 1px solid red;*/
min-height: 220px;
background-color: #fff;
border-bottom: solid 3px #8A8780;
}
section.box-products h2 {
font-size: 1.3em;
font-weight: 400;
}
section.box-products ul li.item {
width: 120px;
height: 140px;
margin-top: 12px;
margin-bottom: 12px;
/*border: 1px solid red;*/
}
更新：
添加overflow：hidden;解决了这个问题！
谢谢！
答案 0 :(得分：0)
<section class="box-products">的孩子是浮子，因此被父母忽略（当达到身高时）。让父母识别浮动孩子的一种简单方法是这样的：
.box-products { overflow: hidden; }