Float is great for wrapping text around an element, like when text wraps around an image in a magazine layout. Floating multiple elements will align them side by side.
Setting clear on an element will make sure it does not wrap around a floating element.
The float property is most commonly used for page layout.
However, the original purpose of float
was to allow text to wrap around an object, something commonly seen in print design.
As float
is often not used as originally intended, working with it can be a bit fragile and a bit tricky until you get used to its quirks.
The CSS float property specifies how an element should float.The CSS clear property specifies what elements can float beside the cleared element and on which side.
We’ll look first at the intended use of float
. Then we’ll look at creating 2 and 3 column layouts and finish up by looking at how to deal with some of the tricky parts of floats; clearing them and dealing with container collapse.
the most common way to use the clear property is after you've used a float
All elements default to clear:none;, so if you don't want other elements to float beside something, you must change the clear style. When you are clearing floats, you match your clear to your float. So if you floated the element to the left, then you should clear to the left. Your floated element will continue to float, but the cleared element and everything after it will appear below it on the web page. If you have elements that are floated to both the right and left, you can clear just one side or you can clear both.
The clear property can have one of the following values:
The clearfix hack is a popular way to contain floats without resorting to using presentational markup. This article presents an update to the clearfix method that further reduces the amount of CSS required.
Then we can add overflow: auto; to the containing element to fix this problem:
The overflow:auto clearfix works well as long as you are able to keep control of your margins and padding. The new, modern clearfix hack however, is safer to use, and the following code is used for most webpages:
It is also common to do entire web layouts using the float property