CSS Float

Education is not limited to just classrooms. It can be gained anytime, anywhere... - Ravi Ranjan (M.Tech-NIT)

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;

}

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 the clear property.

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

Example

div {
    clear: left;
}

The clearfix Hack

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;
}

The overflow:auto clearfix works well as long as you are able to keep control of your margins and padding (else you might see scrollbars). The new, modern clearfix hack however, is safer to use, and the following code is used for most webpages:

Example

.clearfix::after {
    content: "";
    clear: both;
    display: table;

}

Web Layout Example

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

 

Example

.header, .footer {
    background-color: grey;
    color: white;
    padding: 15px;

}

.column {
    float: left;
    padding: 15px;

}

.clearfix::after {
    content: "";
    clear: both;
    display: table;

}

.menu {
    width: 25%;
}

.content {
    width: 75%;
}