Forcing containers to house their floats
Now for some ways to force containers to grow their height to cover their floated children. As we have seen, a container will grow height for inline children that are below the bottom of all the floats. This can happen quite naturally. But there is a way to force inline (and other) materials to clear the bottom of floats: by putting in a CSS clear instruction on a block-level element after the floats you want housed. Such elements are those which would normally form a new line in the natural flow of a document. Elements like <p> and <div>. There is an inline element exception: sometimes authors use a clear on a <br>.
Clearing an element is forcing it onto a new line below floats. It reminds the element to display its normal characteristic of beginning an independent new block separate from entanglements with other elements above. Depending on what floats there are, whether left or right or both and depending on quite how the element is cleared (clear: left, clear: right or the safe one, clear: both), the element will go under the floats as required. If the element contains inline objects like images and text, then these objects will be seen by the parent. The parent will grow the height needed to cover them and, without particularly trying, also cover the floated children in between:
On the left is a float which would not normally be housed by the parent if just this text or this text and this 
inline image were present.
But it is in this case, because this inline crimson text here is cleared and the parent grows its height to cover it.
Fig 1. <div><img class="floated" src="float.jpg" height="90" alt="">On the left is ... <img src="pics/crimson.png" height="16" alt="">inline image were present.<p style="clear: left;color: #900;">But it is in this case, because ... </p></div>
The above method could be rather natural or somewhat strained in the design of the page. If the black text was a description of the picture, for instance, and the red (it might well be black!) was simply a new paragraph beyond the immediate subject of the picture, then there could hardly be any objection. However if text was merely introduced to get a float covered, it might seem a high price to pay. You have to prattle and babble to get a float covered?
However, there is a way out of babbling for height. It is a related method: put in an empty cleared element after the float: it is unnatural because it has no other purpose than to force the issue, it has no particular meaning in the HTML. But that will not worry everyone. Where HTML and CSS evil is concerned, it would only get the mildest satanic approval:
On the left is a float which would not normally be housed by the parent if just this text or this text and this inline image were present.
Fig 2. With a <div style="clear:left"></div> after the float.
Yet another method the author can employ is to give an explicit height to the parent, one sufficient to keep the float(s) inside the parent. Mostly, this is inconvenient because the height is not known in advance. But authors sometimes take a punt:
On left is a float which would not normally be housed by the parent if just this text or this text and this inline image were present.
Fig 3. With the parent given style="height: 90px;" to match the height of the float.
But the text itself can now spill out of the parent! Especially if there was more text or if the parents width was more fluid, (not fixed in px as above). It could get narrower and exacerbate the problem. See what happens when you enlarge the text. It may be OK in very simple situations but what if there are several floats and other images and the user can vary his text size and window size? Heights are hard to predict. To over compensate with a high bid 'just in case' can lead to obvious ugliness where the bluff is not called.
There are tricks and tricks galore in HTML and CSS. But let us move on in our general survey. We will next look at other more forceful means to make parents grow height for floated children; among them, the commonly practised method of specifying an overflow value.