Details about "float" property

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:

1. Floating item cannot extend beyond the edge of its parent container.
2. 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".
3. A block with "float: left" cannot be located further to the right than a block with "float: right".
4. A floating item may not extend beyond the upper edge of its container.
5. A floating item cannot be located higher than the parent block or the previous floating item.
6. A floating item cannot be located higher than the previous line of inline-items.
7. A floating block must be located as high as possible.
8. One floating item followed by another one cannot go outside of its container - line break takes place in this case.
9. 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.