The ways that parents grow height

We can deduce a few ways in which a parent might 'house' its floated children from the foregoing by simple common-sense. Let us review these natural ways before looking at more artificial and somewhat sophisticated ways.

For a start, we know that parents grow height to cover inline children, we know that some floated children occupy a high position under the parent and we should know that floated children can be quite short while inline ones can be quite tall:

Fig 1. Short float, tall inline.

Also we should know that even a tall floated child can be heavily outnumbered by shorter inline children, that widths of elements are quite finite and that therefore the parent, watching out for its inline children will - without particular intention - cover the floated children as well because some of the in-lines will be forced lower than the floats:

Fig 2. Heavily outnumbered by shorter hordes

Of course, one of the uses for floats is to control the placement of pictures (which are floated left or right - no, they can't be floated up or down!). And very often the picture will be accompanied by a lot of text that eventually wraps well below the picture. Hardly any need for an example of this. Or, really, the above is an example if you think of text replacing the crimson inline images.

Perhaps the only thing worth noting about this is that if a user adjusts the browser text size to larger (yes, users can do this - try it now!), the floated children are even more quickly covered because the bigger space provisions thereby made, amplify the amount by which the in-lines outnumber the floats. Perhaps this slightly by the way point is interesting enough to deserve a small appendix.

We now will turn to see how parents can be otherwise coaxed to provide floats with housing.