CSS floats

Introduction

Before flexbox and grids were introduced, floats were the best method available for laying out web components and layouts.

Although floats seem simple, they can be very frustrating for those who do not understand the finer details.

The nature of floats

The float property takes the following values:

p { float: left; }
p { float: right; }
p { float: none; }
p { float: inline-start; }
p { float: inline-end; }

A floated element is one where the float value is any of these options except none.

A floated element is positioned within the normal flow of the document, then taken out of the flow.

The element is then shifted to the left or right - on the current line - as far as possible.

A floated element will shift to the left or right and rest against one of three things:

1. Against the edge of the initial containing block

2. Against the edge of a containing block

3. Against the edge of another float

The left value specifies that the element must move out of flow and shift to the left as far as possible.

p {
  float: left;
}

The right value specifies that the element must move out of flow and shift to the right as far as possible.

p {
  float: right;
}

The none value specifies that the element must not float.

p {
  float: none;
}

The inline-start value specifies that the element must move out of flow and shift to the start edge of its containing block.

p {
  float: inline-start;
}

That is the left edge of its containing block with ltr content and the right edge of its containing block with rtl content.

The inline-end value specifies that the element must move out of flow and shift to the end edge of its containing block.

p {
  float: inline-end;
}

That is the right edge of its containing block with ltr content and the left edge of its containing block with rtl content.

Exercise 1: Float some elements

Open this HTML file in an editor:
exercises-start/exercise-212-01.html

Write a CSS rule to style the element with a class of example1. Set with float: left.

/* Add styles here */
.example1 {
  float: left;
}

Write a second CSS rule to style the element with a class of example2. Set with float: right.

/* Add styles here */
.example2 {
  float: right;
}

Check your work against the finished HTML file:
exercises-finished/exercise-212-01.html

Floats and 
other elements

To understand how floats interact with other elements, let’s use an example with a heading, an image and a paragraph of text.

<h1>This is a heading</h1>
<img src="a.png" alt="Alt text">
<p>Lorem ipsum dolor...</p>

Initially, all three elements will appear in normal flow and appear one after another down the page.

Inside the <p> element are a series of line boxes. These line boxes will become important soon.

If you set the <img> element to float: left, four things happen:

1. The <h1> element is not affected by the floated image.

2. The <img> element will move out of flow and to the left, coming to rest against the left edge of the containing box.

3. The <p> element will slide up under the <img> element.

4. The line boxes inside the <p> element will shorten to accommodate the float.

More on floats and line boxes

Line boxes can sometimes be very short - even containing a single word.

If the space for a line box is too short to contain text, the line box will move down until it fits.

Sometimes, the float box is slightly taller than a specific line box, and a gap may appear under the float box.

Exercise 2: Float an image

Open this HTML file in an editor:
exercises-start/exercise-212-02.html

Write a CSS rule to style the element with a class of example. Set with float: left.

/* Add styles here */
.example {
  float: left;
}

This rule will set two images to float: left. Notice how the second image is extremely wide, so the line boxes beside it are very short.

Check your work against the finished HTML file:
exercises-finished/exercise-212-02.html

Float boxes

As soon as you apply a float 
to block-level, inline or inline-block elements, they become float boxes, with specific characteristics.

Default width

By default, a float box’s width is set to auto so its width will collapse to fit the widest content inside.

This means that a default block-level element will change from a block box with stretched width to a float box with collapsed width.

An inline element will change from an inline box with collapsed width to a float box with collapsed width.

In their default collapsed state, float boxes use an additive model for the overall width.

This means that border and padding are added on top of the collapsed width.

Length or percentage widths

Float boxes can be given length or percentage widths.

p {
  float: left;
  width: 200px;
}

p {
  float: left;
  width: 50%;
}

When given a length or percentage width value, float boxes still use an additive model for the overall width.

This means that border and padding are added on top of the overall width.

Stretched width

Unlike absolutely-positioned boxes, float boxes cannot be stretched using the left and right or top and bottom properties.

Default height

By default, the height of float boxes is collapsed.

While in this collapsed height state, float boxes use an additive model for the overall height.

This means that border and padding are added on top of the overall height.

Length height

Float boxes can be given a height using a length value.

p {
  float: left;
  height: 200px;
}

Float boxes with length height use an additive model for the overall height.

This means that border and padding are added on top of the overall height.

Percentage height

Float boxes can be given a height using a percentage value.

p {
  float: left;
  height: 50%;
}

However, the percentage height of a float box will only be applied if it’s containing box has a specified height.

Float boxes with percentage height use an additive model for the overall height.

This means that border and padding are added on top of the overall height.

Margin

Margins can be applied to all sides of float boxes.

Margin applied to the top side of a float box will move the box down from its original position.

Margin applied to the left side of a left float box will move the box to the right.

Margin applied to the right side of a left float box will move content away from the right edge of the box.

Margin applied to the right side of a right float box will move the box to the left.

Margin applied to the left side of a right float box will move content away from the left edge of the box.

Padding

Padding can be applied to all sides of float boxes.

Border

Borders can be applied to all sides of float boxes.

Exercise 3: Float some images with margin, padding and border

Open this HTML file in an editor:
exercises-start/exercise-212-03.html

Write a CSS rule to style the element with a class of example1. Set with margin: 20px.

/* Add styles here */
.example1 {
  margin: 20px;
}

Write a second CSS rule to style the element with a class of example2. Set with padding: 20px.

/* Add styles here */
.example2 {
  padding: 20px;
}

Write a third CSS rule to style the element with a class of example3. Set with border: 20px solid red.

/* Add styles here */
.example3 {
  border: 20px solid red;
}

Check your work against the finished HTML file:
exercises-finished/exercise-212-03.html

Clearing floats

If you don't want an element to slide up under a float box, you can force the element to sit below, or "clear" the float box above.

Four different clear values that can be applied - left, right, both and none.

If you want an element to clear a left floated element, use the left value.

p {
  clear: left;
}

If you want an element to clear a right floated element, use the right value.

p {
  clear: right;
}

If you want an element to clear left or right floated elements, use the both value.

p {
  clear: both;
}

If you do not want an element to clear any floated items above, you could use clear: none.

p {
  clear: none;
}

However, this is the default value for all elements so is not required in most cases.

Exercise 4: Clear some floats

Open this HTML file in an editor:
exercises-start/exercise-212-04.html

Write a CSS rule to style the element with a class of example1. Set to clear the left floating element above using clear: left.

/* Add styles here */
.example1 {
  clear: left;
}

Write a second CSS rule to style the element with a class of example2. Set to clear the right float element above using clear: right.

/* Add styles here */
.example2 {
  clear: right;
}

Write a third CSS rule to style the element with a class of example3. Set to clear the left and right floating elements above using clear: both.

/* Add styles here */
.example3 {
  clear: both;
}

Check your work against the finished HTML file:
exercises-finished/exercise-212-04.html