css - 为什么这个div不增长div容器？

Question

盒子

section.box-products {

拥有一切

section.box-products ul li.item {   

其中的元素，但即使 <li> count 增加了 box-products 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-产品{

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;*/

更新:

添加溢出:隐藏；解决了问题!

谢谢!

Answer 1

<section class="box-products"> 的 children 是 float ，因此被父级忽略(当涉及到高度时)。让 parent 识别漂浮的 child 的一种简单方法是这样的:

.box-products { overflow: hidden; }