CSS floating elements

Floating elements
Cancel float

All HTML elements on a web page are located in the normal document flow, from top to bottom (for block elements) and from the left to the right (for inline elements). This way of displaying is not very effective, but thanks to CSS, it is possible to change the design for the better.

Floating elements

The CSS property float allows you to make an element floating by shifting it to the left or right side, depending on what value is set:

left shifts the element to the left
right shifts the element to the right
none cancels the float of an element

The only requirement for any floating element is the presence of a fixed width (for example, width: 200px;).

When you define a floating element, you need to place it in the code right below the element under which it should float. All other content located in the code under the floating element will flow around it on the web page. Consider in more detail how browsers load floating elements and the rest of the content on a web page.

First, the browser loads the elements on the page in the normal order, moving from top to bottom, when it meets a floating element, it places it on the specified side. The browser excludes this element from the general stream, and as a result it floats on the page.

Floating element

Since the floating element was excluded from the normal document flow, the rest of the block elements located in the code after it are loaded onto the page as if this element were not there. Notice that the block elements are located underneath the floating element, because the floating element is no longer part of the normal document flow.

floating element in html

If you look closely at the image, you will see that unlike block, when placing inline elements or simple text located inside the block element, the bounds of the floating element are taken into account, so the inline elements and text wrap around the floating element.

Keep in mind that in a single row, you can place several floating elements, if this allows the width of the parent element.

Note: elements with absolute and fixed positioning ignore the float property.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Page title</title>
    <style>
	  p { width: 250px; }
      img { float: left; }
    </style>
  </head>
  <body>
    <p>
    <img src="logo.png" width="100">
    The float property was set to wrap on the left side of the image. 
    The text below the image will wrap around the image at its right edge.
    </p>
  </body>
</html>

Try it »

To create an empty space between the image and the text that flows around it, you need to add external margins to the image (the CSS margin property). Since the image is shifted to the left border of the parent element, it will suffice to add the outer indentations just to the right and bottom to slightly move the text from it:

img { 
  float: left;
  margin: 0 10px 10px 0;
}

Try it »

Cancel float

Sometimes it is required to display the element in such a way that it is not affected by floating elements located in front of it. For example, this element can be a footer, which in any case should be displayed under all other elements of the page. If you have a high side menu on the page, located at the left edge of the web page, then the footer can go up and be displayed to the right of it. Thus, instead of being located at the bottom of the page, the contents of the footer will appear on the same level as the side menu. This problem is solved by using the CSS property clear, which tells the browser that this element should not wrap around floating.

You can set the CSS clear property to one of the following values:

left floating elements are not allowed on the left side.
right floating elements are not allowed on the right side.
both floating elements are prohibited on both sides.
none allows the presence of floating elements on both sides.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Page title</title>
    <style>
	  div { width: 400px; }
      img { float: right; }
      p { clear: right; }
    </style>
  </head>
  <body>
    <div>
    <img src="logo.png" width="100">
    <p>Using the CSS clear property we forbid floating elements on the right side.
	The text below the picture will not wrap around the left side of the picture.</p>
    </div>
  </body>
</html>

Try it »