The CSS float property allows a developer to incorporate table-like columns in an HTML layout without the use of tables. With CSS float, an element can be pushed to the left or right, allowing other elements to wrap around it. Floated elements remain a part of the flow of the web page, unlike elements that use absolute positioning. Absolutely positioned page elements are removed from the flow of the webpage.

Elements float horizontally (right or left) and not vertically (up or down). When an element has been specified to float, it will move to the left or right as much as it can. The elements after the floating element will flow around it. This is very similar to what you would see on a magazine page. Values for the float property are left, right, none, and inherit. Most of the time, you will specify the right and left values.

img {float:left;}

Here is a typical example on how you would float an image to the left and allow text to flow around it.

Clear Property

Elements after the floating element will flow around it. To avoid this, use the clear property. Possible values are left, right, both, none, and inherit. For example, if you wanted to display text on the page after two elements that have been floated, and you do not want the text to flow around the floated elements, you can specify that the next element be styled with clear:both. This way, the next element will clear both elements and not flow around them.

p.clear {clear:both;}

You can then assign this class to a paragraph after one or more elements that have been floated. The paragraph will clear the previous element and not flow around it.

• Privacy
• Support
• Archive