CSS Layout - float and clear

<< Previous

Next Chapter >>

The float property specifies whether or not an element should float.

The clear property is used to control the behavior of floating elements.

The float Property

In its simplest use, the float property can be used to wrap text around images.

The following example specifies that an image should float to the right in a text:

Example

img {
float : right;
margin : 0 0 10px 10px;
}

Try it Yourself

The clear Property

The clear property is used to control the behavior of floating elements.

Elements after a floating element will flow around it. To avoid this, use theclear property.

The clear property specifies on which sides of an element floating elements are not allowed to float:

Example

div {
clear : left;
}

Try it Yourself

The clearfix Hack - overflow: auto;

If an element is taller than the element containing it, and it is floated, it will overflow outside of its container.

Then we can add overflow: auto; to the containing element to fix this problem:

Example

.clearfix {
overflow : auto;
}

Try it Yourself

Web Layout Example

It is common to do entire web layouts using the float property:

Example

div {
    border : 3px solid blue;
}

.clearfix {
    overflow : auto;
}

nav {
    float : left;
    width : 200px;
    border : 3px solid #73AD21;
}

section {
    margin-left : 206px;
    border : 3px solid red;
}

Try it Yourself

All CSS Float Properties

Property	Description
clear	Specifies on which sides of an element where floating elements are not allowed to float
float	Specifies whether or not an element should float
overflow	Specifies what happens if content overflows an element's box
overflow-x	Specifies what to do with the left/right edges of the content if it overflows the element's content area
overflow-y	Specifies what to do with the top/bottom edges of the content if it overflows the element's content area

<< Previous

Next Chapter >>