Home / Articles / Programming languages / Markup languages / HTML & CSS / Details about "float" property

Details about "float" property

Details about "float" property
 
  • Currently 5 out of 5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5
Rating: 5/5 (2 votes cast)

Thank you for rating!

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

Your rating has been changed, thanks for rating!

Log in or create a user account to rate this page.


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.

CSS float example 1

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:

CSS float example 2

Let’s add a bit CSS to the image:

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

So, we get right alignment:

CSS float example 3

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

CSS float example 4

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;
}
CSS float example 5

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:

CSS float example 6

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;
}
CSS float example 7

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;
}
CSS float example 8

But what if the images are of different heights?

CSS float example 9

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

li
{
  display: inline;
}
CSS float example 10

And now let us align vertically:

img
{ 
  vertical-align: top;
}
CSS float example 11

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

CSS float example 12

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: 

CSS float example 13

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:

CSS float example 14

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

CSS float example 15

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:

CSS float example 16

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

CSS float example 17

We need to apply clear:both to the paragraph:

p
{
  clear: both;
}

Our problem is solved:

CSS float example 18

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;
}
CSS float example 19

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

CSS float example 20

If we first set the height for UL:

ul
{
  height: 300px;
}
CSS float example 21

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;
}
CSS float example 22

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.


 

Read also

Post comment

basicuse.net
html5_css
106160485398655174790

Quick navigation

General navigation