CSS - Float (box|property)

> (World Wide) Web - (W3|WWW) > CSS - Cascading Style Sheets - Markup Language (HTML|XML) Skin > CSS - Block Layout > CSS - Float (box|property)

1 - About

Float is a property of a block box. It shifts a block box to the left or right on the current line.

The most interesting characteristic of a float (or “floated” or “floating” box) is that content may flow along its side (or be prohibited from doing so by the clear property).

Content flows down the right side of a left-floated box and down the left side of a right-floated box.

Advertising

3 - Rule

The exact rules governing float behavior are given in the description of the float property.

A floated box is shifted to the left or right until its outer edge touches:

  • the containing block edge
  • or the outer edge of another float.

If there is:

  • a line box, the outer top of the floated box is aligned with the top of the current line box.
  • not enough horizontal room for the float, it is shifted downward until either it fits or there are no more floats present.

Since a float is not in the flow, non-positioned block boxes created before and after the float box flow vertically as if the float did not exist. However, the current and subsequent line boxes created next to the float are shortened as necessary to make room for the margin box of the float.

Any content in the current line before a floated box is reflowed in the same line on the other side of the float. In other words, if inline-level boxes are placed on the line before a left float is encountered that fits in the remaining line box space, the left float is placed on that line, aligned with the top of the line box, and then the inline-level boxes already on the line are moved accordingly to the right of the float (the right being the other side of the left float) and vice versa for rtl and right floats.

4 - Usage

4.1 - Image

The first usage of float was to let float an image (left or right) in a text that contains several paragraph. The floating element is then not contained to allow this configuration.

4.2 - Layout

For normal text flow, this behavior is great but for layout purpose, it's a major problem because normally, you want that your image stays in its element container. In order to resolve this, the clear property must be applied to a block-level element (to be part of a normal flow) just before the end of the container element.

<div class="item">
 <img src="beautifulComputer.gif" style="float:left;">
 Beautiful Computer
 <div style="display:block; clear:left; visibility:hidden">&nbsp;</div>
</div>

This is called a clearfix and you can apply it with a class defined as:

.clearfix:after {
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}
Advertising

5 - Example

5.1 - Basic

.without-float{
  font-style: italic;
  border: 1px solid DeepSkyBlue;
}
.with-float{
  float: right;
  font-style: italic;
  border: 1px solid DeepSkyBlue;
}
Without a float right property:
<div>
  <div class="without-float">To the right</div>
  <div>will stay in the normal flow</div>
</div>
<BR/>
With a float right property:
<div>
  <div class="with-float">To the right</div>
  <div>will go out the normal flow to the right</div>
</div>

5.2 - containing block too narrow to contain the content

In the following document fragment, the containing block is too narrow to contain the content next to the float, so the content gets moved to below the floats where it is aligned in the line box according to the text-align property.

p { width: 10em; border: solid aqua; }
span { float: left; width: 5em; height: 5em; border: solid blue; }
<p>
<span> </span>
Supercalifragilisticexpialidocious
</p>

6 - Documentation / Reference

Advertising
web/css/block/float/float.txt · Last modified: 2019/02/09 11:40 by gerardnico