Your rating has been changed, thanks for rating!

You have already rated this page, you can only rate it once!

Proper use of CSS float property may turn out a daunting task even for an experienced coder. This article contains the examples of applying of property float, as well as some mistakes with illustrative examples.

What is "float"?

Some elements in CSS are block-elements and, therefore, begin with a new line. For example, if you place two paragraphs tagged with p, then they will be placed under each other. Other elements are the "inline", i.e. displayed on a page as one line.

One of the ways to change the flow type of elements is to use float property. The classic example is to use float to align images to the left or right. Here is a simple HTML-code of a picture and a paragraph:

<img src="http://lorempixum.com/200/200/" /> <p>Lorem ipsum...</p>

They are displayed in a new line:

Let's add a bit CSS to the image:

img { float: right; margin: 20px; }

So, we get right alignment:

If there is more text, the paragraph will flow around the image:

For example, we need to make the indentation of 20 pixels between an image and a text. Such a combination will not work:

p { margin: 20px; }

It will be correct in this way:

img { margin: 20px; }

Why doesn't the indentation for a paragraph work then? To find out, let us add a frame:

p { border: solid 1px black; }

The result may surprise you:

As it turns out, the picture is inside the paragraph! Therefore, margin property does not work in the first case. To fix this, you may apply float:left to the paragraph and set an absolute width:

img { float: right; margin: 20px; } p { float: left; width: 220px; margin: 20px; }

Strange rules for "float"

Let us now turn to more complex ways of using float: to the rules regulating floating objects. It may be necessary when making up a gallery of images. For example:

<ul> <li><img src="http://placehold.it/100x100&text=1"/></li> <li><img src="http://placehold.it/100x150&text=2"/></li> <li><img src="http://placehold.it/100x100&text=3"/></li> <li><img src="http://placehold.it/100x100&text=4"/></li> <li><img src="http://placehold.it/100x100&text=5"/></li> <li><img src="http://placehold.it/100x150&text=6"/></li> <li><img src="http://placehold.it/100x100&text=7"/></li> </ul>

By default, each list item will appear in a new line. If we apply float: left to each one, the images will line up with a line break:

li { float: left; margin: 4px; }

But what if the images are of different heights?

If we add display in one row for the elements of a list, we get it a little bit nicer:

li { display: inline; }

And now let us align vertically:

img { vertical-align: top; }

It should be remembered that in the case of higher images, all other images flow around only the previous one, for example:

An example of changing the order of elements - for example, we have a list of items in order:

<ul> <li><img src="http://placehold.it/100x100&text=1"/></li> <li><img src="http://placehold.it/100x100&text=2"/></li> <li><img src="http://placehold.it/100x100&text=3"/></li> <li><img src="http://placehold.it/100x100&text=4"/></li> <li><img src="http://placehold.it/100x100&text=5"/></li> <li><img src="http://placehold.it/100x100&text=6"/></li> </ul>

If we want to arrange them in reverse order, we just use float: right instead of float: left and we do not have to change the order in HTML:

With the help of float it is convenient to group items on a page, but then we face a big problem: the following elements (text or block) also get a flow property. For example, we have a set of images:

The text below it starts to flow around the entire block:

To avoid this, you must use the property clear. If we apply it to the second image:

ul li:nth-child(2) { clear: left; }

Here is what we get:

In this case, the remaining images continue to inherit float: left . Correspondingly, the text will be displayed distorted:

We need to apply clear: both to the paragraph:

p { clear: both; }

Our problem is solved:

Now let us imagine that we need to set background for the gallery out of the previous examples. If the items were not floating then we would have this:

ul { background: gray; }

But if we apply float: left to the items from the list, the background disappears completely:

If we first set the height for ul:

ul { height: 300px; }

It does not solve the problem either, because the size of the background is defined. The class "clearfix", which will be applied to div on the same level as the elements of ul, will help us.

.clearfix { clear: both; }

There is another solution, using overflow:

ul { overflow: auto; }

Nine rules of float-items:

Floating item cannot extend beyond the edge of its parent container. Each floating item will be displayed on the right or below the previous one with float: left , or to the left and below with float: right . A block with float: left cannot be located further to the right than a block with float: right . A floating item may not extend beyond the upper edge of its container. A floating item cannot be located higher than the parent block or the previous floating item. A floating item cannot be located higher than the previous line of inline-items. A floating block must be located as high as possible. One floating item followed by another one cannot go outside of its container - line break takes place in this case. A block with float: left should be located as far to the left as possible, and with float: right - as far to the right as possible.

Based on Joshua Johnson's works.