What does Nick mean when he says it "collapses?

Hey guys and girls,

So I was watching this lesson and following along and of course everything worked as it should, as I am used to by now from Treehouse. So let me take a second to thank the people here for creating these courses.

As for my question. When Nick used the float left (right) he said the content "collapses" around it or something. I don't know how a browser interprets this and causes the collapse. The way I see it is that the floated items literally float up from the page and nest themselves in a new layer or something. I don't get why this happens. Why does the float overlap with the footer? They're totally different lines and should stay clear of each other right? Can someone please elaborate on this and in the process explain why the floated item covers the footer and not, for example, the header or something. You can use abstract examples, I have a pretty vivid imagination so I'll probably understand.

Thank you so much.