CSS tutorial series: The float & clear properties

This post is going to discuss the CSS float property. The elements inherit the property values from their parent.

Float property

Property	Value
float	left, right, none, inherit

Using this property takes the element out of the page flow and allows its positioning to the left or right side of its container.

Let's consider that we have, an image followed by a paragraph, using the float property will place the image to the left or right of these elements' container.

• Using the value none is the default value of the float property meaning it will display the element in its default position.

Clear property

The clear property defines how to handle the sibling of a floating element.

Property	Value
clear	left, right, both, none, inherit

• none is the default value of the clear property which states that, no elements that are left or right floated are pushed under a the element.

• when applied the left property value, pushes the element under the left floated elements.

• when applied the right property value, pushes the element under the right floated elements.

• when applied the both property value, pushes the element under both left & right floated elements.