Float - right & left in CSS

float property is used to decide which element floats and which doesn't.

It's value can either be left or right. An element with float style property floats in the extreme left or in the extreme right side of the parent element.

An element doesn't take the complete width like a block level element, when float style property is applied, rather it allows its siblings to surround it.

p {
    float: left | right;
}

Live Example →

clear property

Whenever we use float property on any element, the elements below it try to fill up the space emptied by the float element, as the float element either moves to the left or the right boundary.

This behaviour can distort your webpage design. To avoid the elements below the floating element to surround it, clear property is used.

By prodiving clear:right style to the element below the floating element, we inform the element, to stay clear off the element which is floating right. Similarly clear:left, stays clear off the floating left element. And clear:both works for both.

Live Example →

Using overflow:auto hack

If we have a parent element, and a child inside it. And the height of the child element is more than the parent element, i.e. the child element is taller than the parent element. Now, if the child is floated, it leaves the parent element and renders on top of it, reducing the parent element to its next minimum size, which can be zero as well, making the parent element disappear.

Live Example →

Application: Web page Layout Example

Do you know, we can create a basic layout of a simple webpage now. A webpage which will have a header, a body part consisting of a sidebar and a content section and then a footer below the body.

Go to: Setting basic Webpage Structure