CSS float

The float property enables the boxes to float right or left or none of these. These properties are useful while making the responsive pages (The fluid type or flexible pages). This property may align the block level elements.

float:left;

By default, the box or element is aligned on the left side. But it does't mean that they float on the left side. There is difference between align and float property.

Example

This element is floating on the left side. Remove, float:left; to see the effect of float.

The content floats after the element (box) that has float property (span element that has float property).

If float:left; property is removed, then the inside box as well as the content floats freely.

Whenever float or position property is used for the inline element, the inline element behaves as a block element.

float:right;

In this case, the box floats on the right side. In the following example, the content present within the box also floats on the right side.

Example

This element is floating on the right side. Remove, float:right; to see the effect of float.

The content floats after the element (box) that has float property (span element that has float property).

float:none;

none value means that there is no value for the float property. The box neither floats on the left nor on the right side.

Example

You can observe that the box as well as the text float freely.

You may have question in your mind that

The box has float:none; property but still floats on the left side?: Actually, the box is not floating on the left side but aligning on the left side because every element is aligned on the left side by default.

Examples

Here, we will see the examples to understand the concept of float.

fluid type pages

Fluid type pages are flexible for all devices (responsive). Here, we take the example of three column based page.

Example

<div style="width:100%;">
<div style="width:33%; float:left; border:1px solid red;"></div> <!---red part-->
<div style="width:33%; float:left; border:1px solid blue;"></div> <!---blue part-->
<div style="width:33%; float:left; border:1px solid green;"></div> <!---green part-->
</div>

Try </>

In the above example, a page of width (100%) is divided into three parts (33%). And float property places the red, green and blue boxes one after another in a line.

If float property is not used, then the boxes will not be on the same line.

horizontal list items

The list items (li is block element) in the list are on the different lines by default (vertically). But the float property can align these list items in the same line (horizontally).

Example

<style>
ul li{float:left;}
</style>
Try </>

Here, 'ul li' means that li is the child of ul.

Next Previous