Floating elements within a div, floats outside of div. Why?

Question

Say you have a div, give it a definite width and put elements in it, in my case an img and another div.

The idea

Answer 1

The easiest is to put overflow:hidden on the parent div and don't specify a height:

#parent { overflow: hidden }

Another way is to also float the parent div:

#parent { float: left; width: 100% }

Another way uses a clear element:

CSS

span.clear { clear: left; display: block; }