내 DIV를 플로팅 DIV 안에 완전히 넣을 수 있습니까?

Question

내 CSS에 문제가 있습니다. 내 화면에 거기에 버튼이있는 영역이 있습니다. 버튼 수는 다양합니다. 이 버튼은 DIV (sbr_btn) 안에 으로 묶여 있습니다. 이런 식으로 뭔가가 : 버튼을 둘러싸하지 않는 한 다음 외부 DIV 왼쪽 :

Outer DIV Outer DIV Outer DIV 

01 02 03 04 05 
06 07 08 ... 
71 72 73 74 75 

Outer DIV Outer DIV Outer DIV 

문제는 내 버튼 플로트이 있기 때문이다. 그것은 단지 모든 버튼의 높이를 무시합니다. 위와 같지 않습니다. 내가 바깥 쪽을 만들 수있는 방법이 있습니까 DIV는 부동 단추를 묶고 있습니까?

<div id="sbr_btn" > 
     <div><a href='xx'>01</a></div> 
     <div><a href='xx'>02</a></div> 
     <div><a href='xx'>03</a></div> 
     <div><a href='xx'>04</a></div> 
     <div><a href='xx'>05</a></div> 
     <div><a href='xx'>06</a></div> 
     many more 
     <div><a href='xx'>75</a></div> 
</div> 


#sbr_btn div { 
    float: left; 
    padding: 4px; 
    text-align: center; 
} 
#sbr_btn div a { 
    display: inline-block; 
    padding: 1px 4px; 
    border: 1px solid #CCCCCC; 
    border-radius: 4px 4px 4px 4px; 
    color: #111111; 
} 

Answer 1

그냥 div를 포함에 overflow:hidden를 사용

#sbr_btn { 
    overflow:hidden; 
} 

JS Fiddle demo합니다.

Answer 2

clear: both; CSS 스타일을 사용하여 컨테이너 끝에 <div>을 넣을 수 있습니다. 컨테이너를 둘러싸 기 위해 부유 요소 뒤에 하나를 포함합니다.

 

.clearFix { clear: both; } 

<div id="sbr_btn" > 
    <div><a href='xx'>01</a></div> 
    <div><a href='xx'>02</a></div> 
    <div><a href='xx'>03</a></div> 
    <div><a href='xx'>04</a></div> 
    <div><a href='xx'>05</a></div> 
    <div><a href='xx'>06</a></div> 
    <!-- many more --> 
    <div><a href='xx'>75</a></div> 

    <div class="clearFix"></div> 
</div> 

또한, 단순히 컨테이너의 크기를 설정하면이 솔루션에 대한 필요성을 방지 할 수 있습니다.