Floating and Clearing

Now that you have been introduced to the box model, you can begin to understand how floating and clearing works. When block elements are adjacent, such as images within paragraphs or two <div> elements next to each other, the float and clear properties control the overall flow of the content on the page.

• float. There are three values for the float property: left, right, and none. The syntax is simply

   float: value; 

  If the float value is left, the element floats to the left of the display and all subsequent elements wrap around it to the right. If the float value is right, the element floats to the right and text wraps around it to the left.

• clear. There are four values for the clear property: none, left, right, and all. The syntax is simply

   clear: value; 

  The clear style is used in conjunction with float styles so that the block elements are not running into each other on the page. You will often see a <br/> tag with the attribute clear="all" used to separate <div> elements from each other, but you can also define a value for the clear style in the rule for the tag, ID, or class itself.