Using Floating Elements

The browser renders the elements of an HTML page with a flowing layout. This means that it places the inline elements from left to right, and when it is necessary it starts a new line. Block elements are rendered from the top of the window down to the bottom.

You can change this behavior with the float property; setting its value left or right moves the related block element to the left or to the right, and the subsequent content wraps around the floating element.

The Listing below shows a simple web page that does not contain floating elements, it is displayed in the image that follows.

Listing: Using floating elements