이 div가 div 컨테이너를 성장시키지 않는 이유는 무엇입니까?

Question

상자는

section.box-products { 

그것의 모든

section.box-products ul li.item { 

요소가 있지만, <li> 카운트가 증가하더라도 박스 제품 사업부는 높이 증가되지 않습니다.

왜?

코드 :

 <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-제품 H2 {

font-size: 1.3em; 
font-weight: 400; 

,691 363,210

}

section.box-제품 UL li.item {

width: 120px; 
height: 140px; 

margin-top: 12px; 
margin-bottom: 12px; 

/*border: 1px solid red;*/ 

}

UPDATE : 오버 플로우 추가

: 숨겨진를; 문제가 해결되었습니다!

감사합니다.

Answer 1

<section class="box-products">의 자식은 부동 상태이므로 부모에 의해 무시됩니다 (높이의 경우). 부모가 떠 다니는 어린이를 인식하게하는 간단한 방법은 다음과 같습니다.

.box-products { overflow: hidden; }