How can I make my DIV fully enclose floating DIV's inside it?

I am having a problem with my CSS. I have an area on my screen where there are buttons. The number of buttons is variable. These buttons are enclosed inside of a DIV (sbr_btn). Something like this:

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

The problem is that because my buttons have float: left then the outer DIV does not enclose the buttons. It just ignores the height of all the buttons and does not look like above. Is there some way that I can make the outer DIV enclose the floating buttons?

<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>
        开发者_如何学Gomany 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;
}

Just use overflow:hidden on the containing div:

#sbr_btn {
    overflow:hidden;
}

JS Fiddle demo.

You could put an empty <div> at the end of the container with the clear: both; CSS style. I include one after my floated elements to force their container to enclose them.

<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>

.clearFix { clear: both; }

Also, simply setting the size of the container avoids the need for this solution.