WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

CSS Layout - float and clear


The float is used with images, but it is also useful when working with layouts.

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

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

The values for the float property are left, right, and none.





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 left in a text:

Example

img {
    float: left;
    margin: 0 0 15px 15px;
}
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 the clear property.

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

Example

div {
    clear: right;
}
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 »