CSS Float

Float is a powerful web design tool. When a float is applied to an element, that element is shifted to the right or left of the current line. One common use of float is to wrap text around a picture. In the example below, Picture A is shown as an example of floating to the left, and Picture B is shown as an example of floating to the right.

Float is often used to set up the layout template for a website. In the example below, the sidebar section floats to the left, and the main content section floats to the right. Setting up the different sections using float (as opposed to other techniques such as using a table) makes it easy for the website to behave in a responsive manner. In other words, it can render fine regardless of the screen size of the device used to access the site.

The float property has the following possible values:

• none: no float effect. This is the default.
• left: floats to the left.
• right: floats to the right.
• inherit: inherits the float setting from the parent element.
• initial: sets the float setting to the default value.

Example 1: Given the CSS declaration,

#leftfloat {   float: left; }

the following HTML,

<span id="leftfloat"><img src="yp.jpg"></span>This example illustrates how float:left affects the appearance of a block. Notice how the image "floats" to the left.

renders,

This example illustrates how float:left affects the appearance of a block. Notice how the image "floats" to the left.

Example 2: Given the CSS declaration,

#rightfloat {   float: right;   width: 50px; }

the following HTML,

<span id="rightfloat"><img src="yp.jpg"></span>This example illustrates how float:left affects the appearance of a block. Notice how the image "floats" to the right.

renders,

This example illustrates how float:right affects the appearance of a block. Notice how the image "floats" to the right.

Notice the presence of the width property increases the spacing between the image and the text.

Often when the desired float effect is completed, it is necessary to remove that effect explicitly. This is done via the clear property in CSS.