As we saw in the previous chapter, CSS allows any element to be floated, from images to paragraphs to lists. This is not without a price: floated elements introduce their own set of strangeness. As was discussed, floated elements have an unusual place in determining the flow of the document. For example, the boxes generated by other elements are drawn as though floated elements don’t exist, but the content of those elements is rendered while taking the float’s presence into account. This in turn influences the generation of element boxes, which means that floats indirectly do affect these boxes.
Some particulars can help explain some of this behavior. An element that has been floated becomes a block-level element, regardless of its previous status. Thus, if an image (which is ordinarily treated as an inline element) is floated, it becomes a block-level element. This block-level status helps explain why when an element is floated, other content flows around it.
Remember that if you float a
element, its width will tend toward zero. This is exactly the
opposite of the normal horizontal rules, where
width is increased until the seven properties
equal the parent’s
width. A floated
element’s width will default to
then defaults to zero, which is then increased to the browser’s
minimum allowed width. Thus, a floated paragraph could literally be
one character wide—assuming that to be the browser’s
minimum value for
width. In practice, it’s more likely that ...