CSS – Understanding the float [Webbing Tips]

In this post, you will understand the ‘float’ property with CSS, what it does and when to use it in your Web Application.  This post is part of the Webbing Tips series, where you learn a Web Development related tip or concept with just 10 minutes of your time.

CSS float

‘float’ CSS Property on an element on a Web Page, is used to position that element in relation to the other elements that are preceding or following the specified element.  It works only on relatively positioned elements (which mean the ‘float’ Property is ignored on elements with ‘position:absolute’)

float Property can take 4 values:

• left – Element floats to the left and the elements following this will be positioned next to this element on the right side
• right – Element floats to the right and the elements preceding this will be positioned next to this element on the left side
• none – No float.  Element stays where it is, depending on the sequence in which it appears
• inherit – Element inherits the floating behavior from its Parent Element

Examples

When to Use?

When you have relatively positioned elements on your Web Page and you want to Position them to the Left or Right of the Browser Canvas. Note, this positioning works well irrespective of the Browser Canvas Dimensions, as the elements are relatively positioned.