CSS Layout - float and clear
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:
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:
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:
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 »
More Examples
An image with border and margins that floats to the right in a paragraph
Let an image float to the right in a paragraph. Add border and margins to the image.
An image with a caption that floats to the right
Let an image with a caption float to the right.
Let the first letter of a paragraph float to the left
Let the first letter of a paragraph float to the left and style the letter.
Creating a horizontal menu
Use float with a list of hyperlinks to create a horizontal menu.
Creating a homepage without tables
Use float to create a homepage with a header, footer, left content and main content.
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 |
