Why does the contained div not recognize the height of the elements inside?

Question

how does my containing div (box_blue) recognize the height of the elements inside?

#boxes_blue {
display: block;
margin: 0 0 0 175px;
border: 1px solid brown;
clear:  both; 
}

#boxes_blue_each {
float: right;
height: 100px;
width:  100px;
padding: 10px;
border-left: 3px solid #fff;
background-color: #004964;
color: #fffacf;
text-transform: uppercase;
text-align: left; 
}

<div id="boxes_blue"> <div id="boxes_blue_each">one</div> <div id="boxes_blue_each">two two</div> <div id="boxes_blue_each">three three three</div> <div id="boxes_blue_each">four four four four</div> </div>

Answer 1

This is due to the fact that all the delimiters contained in it.

I'm not sure why this is the case, but I know a few solutions. Either set the overflow: hidden for the containing div, or add another div below the floating divs with "clear: both". Of course, you can also set the height and width of the containing div.