Inline flow
Let's put some content into an initially heightless, 500px wide, grey backgrounded div container. The children we will be looking at, at this stage, are letters or characters. Much can be said about these, the little imaginary boxes that surround each letter could be thought of as the children. We could as well put in images instead to illustrate a few key points about regular or inline flow. For now, just think a-z, A-Z, 0-9 and a space and throw in an underline, _. You will see the container now via its grey background.
And here are some words of different heights. Notice how the height of the row with the variably high letters has grown to fit the tallest. It would be too silly if this height varied in the same line! The surrounding lines would have to curve too, to follow the silly curvature of the variable one. No, it is much simpler. The lines are all just rectangles, big enough to fit the tallest letter on the line. Roughly speaking, that is it.
Fig 1. <div style="color: #900;">Here is some ordinary text ... [with some words styled for different sizes]... </div>
We will come to see that a significantly different process happens when children are floated in a container. It is easy to confuse the two processes. Normal children are objects like images and little text boxes that are not especially prevented (by being "positioned" by an author) from being "inline", "in the normal flow".
Forget all about the similarities between floats organising themselves and ordinary content organising itself. The perceived similarities are largely illusory. For a start, in the ordinary flow of text, the container develops a height. It is aware of the children that take their place in the normal flow. It grows in height in reaction to its children. Things that go in the regular flow like this are often called "content". If there is no content, the div develops no height at all. At least not in most standards compliant browsers. It is very important to keep appreciating this. (This is why it is important for now not to view these pages in Internet Explorer. In IE culture, containers see and respond to their floated children and grow their height. More on this later.) A div with no assigned height has no height. It does not get a height unless it has content, unless it has normal children in residence. With such normal children, it grows its height to accommodate them.
Let's dwell more on how ordinary, inline, children take their places. The very rough rule is: the container makes rows big enough to fit the tallest child on it, and all the children line up their bottom edges together. Later you will see that with floated children, it is their tops that line up on lines. With ordinary children like inline text and inline images, it is their feet that line up.
Here is an example with different-sized coloured boxes. Images are by default inline elements like letters. In the caption below, I have left out details like alt tags and dimensions:
Fig 2. <div style="width:500px; border: 4px solid #000"><img src="orange.gif">
<img src="red.gif">
<img src="blue.gif">
<img src="yellow.gif">
<img src="green.gif">
<img src="wine.gif">
<img src="crimson.gif">
See how the HTML camera has caught the process in slow motion. (Don't forget to allow animated gifs in your browser!).
As with the text example higher in this page, the container grows in height to just envelop the content. The container first gets height when the first child comes. Just enough and no more. And the children adjust their positions when taller siblings find a place on the same row so that they are level at the bottom of their feet. See how you can visualise the process via the animation link above.
But things are very different and more mysterious when children float into the container. Let us look at this next.