Float

Float allows an element to be positioned to the left or the right of its containing box's padding.

 

Other content flows around the floated box.

 

Property Description Value
float Specifies whether a box should be floated left 

right

none

inherit

 

 

Multiple floated boxes align against each other, horizontally, if there's room, or down the page otherwise.

 

Syntax:

#myBox { float: left; }

 

*note: Open this article in a tab on its own to see the 4th box floating next to the 3rd

Containing Box

 

 

Here's an example of an image being floated within its containing box and the rest of the text content being wrapped around it:

Save & refresh browser:

iframe source*

 

 

 

clear

 

As can be seen in the above, elements after the floating element will flow around it.

 

This can be avoided by using the clear property.

 

Syntax:

#myDiv { clear: right; }

 

 

Property Description Value
clear Specifies which sides of the containing element other floating elements are not allowed both 

left

right

none

inherit

 

 

Notice line 9 now has the clear property defined on the <p> element:

Save & refresh browser:

iframe source*

Leave a Reply