JavaScript Tutorial

CSS Float

 

The CSS float property is used for positioning elements by pushing them to the left or right, allowing other elements to wrap around them. It is commonly used for images and layouts.

Float only works horizontally, so elements can only be floated left or right, not up or down.

The possible values for the float property are:

Value

Description

none

It specifies that the element is not floated, and will be displayed just where it occurs in the text. this is a default value.

left

It is used to float the element to the left.

right

It is used to float the element to the right.

initial

It sets the property to its initial value.

inherit

It is used to inherit this property from its parent element.

Input:-

 

Output:-

 

How Elements Float

When an element is floated, it is taken out of the normal flow and shifted to the left or right as far as possible within its containing element. Other elements flow around the floated item unless they are prevented from doing so by their clear property.

Input:-

 

Output:-

 

Turning off Float Using Clear Property

To turn off float for an element, the clear property can be used to specify which sides of the element's box other floating elements are not allowed. This allows elements that come after the floating element to flow around it.

Input:-

 

Output:-

Note:- The clear property only clears the element from floated boxes within the same block and does not clear the element from floated child boxes within itself.

Go back to Previous Course