Managing the Flow of Text

A moment ago I discussed the concept of the "current line," which is an invisible line used to place elements on a page. This line has to do with the flow of elements on a page; it comes into play as elements are arranged next to each other across and down the page. Part of the flow of elements is the flow of text on a page. When you mix text with other elements such as images, it's important to control how the text flows around the other elements.

Following are some style properties that provide you with control over text flow:

• float Determines how text flows around an element.

• clear Stops the flow of text around an element.

• overflow Controls the overflow of text when an element is too small to contain all the text.

The float property is used to control how text flows around an element. It can be set to either left or right. These values determine where to position an element with respect to flowing text. So setting the float property to left for an image would result in the image being positioned to the left of flowing text.

You can prevent text from flowing next to an element by using the clear property, which can be set to none, left, right, or both. The default value for the clear property is none, indicating that text is to flow with no special considerations for the element. The left value causes text to stop flowing around an element until the left side of the page is free of the element. Likewise, the right value means that text is not to flow around the right side of the element. The both value indicates that text isn't to flow around either side of the element.

The overflow property handles overflow text, which is text that doesn't fit within its rectangular area; this can happen if you set the width and height of an element too small. The overflow property can be set to visible, hidden, or scroll. The visible setting automatically enlarges the element so that the overflow text will fit within it; this is the default setting for the property. The hidden value leaves the element the same size, allowing the overflow text to remain hidden from view. Perhaps the most interesting value is scroll, which adds scrollbars to the element so that you can move around and see the text.