CSS Layout - float and clear

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.

The float Property

• left - The element floats to the left of its container
• right- The element floats to the right of its container
• none - The element does not float (will be displayed just where it occurs in the text). This is default
• inherit - The element inherits the float value of its parent

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.

Example -

float: right;

img { float: right; }

Run Example

float: left;

img { float: left; }

Run Example

No float

img { float: none; }

Run Example

How to Use the CSS clear Property

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:

• none - Allows floating elements on both sides. This is default
• left - No floating elements allowed on the left side
• right- No floating elements allowed on the right side
• both - No floating elements allowed on either the left or the right side
• inherit - The element inherits the clear value of its parent

div { clear: left; }

Run Example

The clearfix Hack

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:

.clearfix { overflow: auto; }

Run Example

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:

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

Run Example

Images Side By Side

.img-container { float: left; width: 30%; /* three containers (use 25% for four, and 50% for two, etc) */ padding: 4px; /* if you want space between the images */ }

Run Example

Web Layout Example

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

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

Run Example