Wrap Content with Floating Elements

HTML normally flows from the top of the browser window down to the bottom,one headline, paragraph, or block-level element on top of another. This word-processor-like display is visually boring , but with CSS,you’re far from stuck with it. ——float.

 

• left. Slides the styled element to the left, while content below wraps around the right side of the element.
• right. Slides the element to the right.
• none. Turns off the float and returns the object to its normal position.

 

Floated elements move to the left or right edge of their containing element. In some cases, this just means that the element moves to the left or right edge of the browser window. However if you float an element that’s inside another tag with a set width or position on a web page, then the float will go to the left or right edge of that tag—the floated element’s “container.”