EasyCode365EasyCode365

Floating elements and clearfixes

Floats are an older CSS feature, but they are still worth learning.

Today, you should usually use Flexbox or Grid for full page layouts. Floats are still useful for one classic job: placing an image or small box beside text so the text wraps around it.

In this lesson, you will learn how floats work, why they can break parent containers, and how clear and clearfixes solve common float problems.

Why floats exist

Floats were created for magazine-style layouts.

The original idea was simple: place an image on the left or right side of an article, then let the paragraph text wrap around it.

Before Flexbox and Grid existed, developers also used floats to build columns and page layouts. That worked, but it often caused layout problems.

What float does

The float property moves an element to the left or right side of its container.

Content that follows the floated element can move up and wrap around it.

Common values are:

  • float: left
  • float: right
  • float: none

Floated elements are removed from the normal block flow, but text and inline content still wrap around them. That is the special behavior that makes floats useful.

Floating left and right

Use float: left to push an element to the left.

Use float: right to push an element to the right.

Read-only

When an element floats left, nearby text can wrap on its right side. When an element floats right, nearby text can wrap on its left side.

How text wraps around floated elements

This is the most beginner-friendly use case for floats.

The image box floats left, and the paragraph text wraps beside it.

Can edit
<article class="article">
  <div class="article-image">Image</div>
  <p>
    This text comes after the floated image. Because the image is floated left, the paragraph moves
    up and wraps around the right side. This is the classic use case for CSS floats. Add more
    sentence content, and you can see the text continue beside the image until there is no more
    vertical space next to it. After the text passes the bottom of the floated image, it returns to
    the normal full-width line below.
  </p>
</article>

<style>
  .article {
    max-width: 420px;
    font-family: Arial, sans-serif;
    line-height: 1.5;
  }

  .article-image {
    float: left;
    width: 110px;
    height: 90px;
    margin-right: 16px;
    margin-bottom: 8px;
    display: grid;
    place-items: center;
    background-color: #dbeafe;
    border: 2px solid #2563eb;
    border-radius: 6px;
    color: #1e40af;
    font-weight: bold;
  }
</style>

The margin-right creates space between the floated box and the text.

Parent height collapse

Floats can create a confusing problem.

If a parent contains only floated children, the parent may not grow tall enough to wrap around them. This is called parent height collapse.

Can edit
<div class="broken-parent">
  <div class="float-box">Float</div>
</div>

<p class="after-text">This text moves up because the parent did not wrap around the float.</p>

<style>
  .broken-parent {
    border: 3px solid #dc2626;
    background-color: #fee2e2;
    font-family: Arial, sans-serif;
  }

  .float-box {
    float: left;
    width: 120px;
    padding: 20px;
    background-color: #fecaca;
    border: 2px solid #991b1b;
    text-align: center;
  }

  .after-text {
    font-family: Arial, sans-serif;
  }
</style>

The red parent border does not wrap around the floated child. This happens because the floated child is no longer counted like a normal block in the parent's height.

What clear does

The clear property tells an element not to sit beside a floated element.

Instead, the cleared element moves below the float.

Can edit
<div class="side-note">Float</div>

<p class="wrap-text">This paragraph wraps beside the floated box.</p>

<p class="cleared-text">This paragraph is cleared, so it starts below the floated box.</p>

<style>
  .side-note {
    float: left;
    width: 110px;
    padding: 18px;
    margin-right: 12px;
    background-color: #fef3c7;
    border: 2px solid #d97706;
    font-family: Arial, sans-serif;
    text-align: center;
  }

  .wrap-text,
  .cleared-text {
    font-family: Arial, sans-serif;
  }

  .cleared-text {
    clear: both;
    padding-top: 8px;
  }
</style>

Use clear when the next element should start below floated content.

Clearing left, right, and both

The clear property has three common values:

  • clear: left moves below left-floated elements.
  • clear: right moves below right-floated elements.
  • clear: both moves below left and right floats.

For beginners, clear: both is usually the safest choice.

Making the parent contain its floats

When a parent contains only floated children, you need a way to make it wrap around them and fix the parent height collapse problem.

There are two common solutions, and both are applied to the parent, not to the floated child:

  • display: flow-root — the modern one-line approach.
  • A clearfix — an older technique using the ::after pseudo-element.

The next two sections show each one.

Modern technique: display: flow-root

The cleanest modern way to make a parent wrap around its floated children is one line: display: flow-root on the parent.

It creates a new block formatting context, which contains the floats. There is no pseudo-element and no extra rules to remember.

Can edit
<div class="fixed-parent">
  <div class="float-box">Float</div>
</div>

<p class="after-text">Now the parent wraps around the float, so this text starts below it.</p>

<style>
  .fixed-parent {
    display: flow-root;
    border: 3px solid #16a34a;
    background-color: #dcfce7;
    font-family: Arial, sans-serif;
  }

  .float-box {
    float: left;
    width: 120px;
    padding: 20px;
    background-color: #bbf7d0;
    border: 2px solid #15803d;
    text-align: center;
  }

  .after-text {
    font-family: Arial, sans-serif;
  }
</style>

display: flow-root is supported in all modern browsers, so it is the recommended choice for new projects.

The classic clearfix

You will still see an older technique in many existing codebases. A clearfix uses the ::after pseudo-element to create an invisible element after the floated children and clear the floats.

Can edit
<div class="fixed-parent clearfix">
  <div class="float-box">Float</div>
</div>

<p class="after-text">The clearfix also makes the parent wrap around the float.</p>

<style>
  .fixed-parent {
    border: 3px solid #16a34a;
    background-color: #dcfce7;
    font-family: Arial, sans-serif;
  }

  .float-box {
    float: left;
    width: 120px;
    padding: 20px;
    background-color: #bbf7d0;
    border: 2px solid #15803d;
    text-align: center;
  }

  .clearfix::after {
    content: "";
    display: table;
    clear: both;
  }

  .after-text {
    font-family: Arial, sans-serif;
  }
</style>

It is useful to recognize this pattern, but for new code display: flow-root is simpler.

When floats are still useful today

Floats are still useful when you want text to wrap around something.

Good examples:

  • an image inside an article
  • a small author photo beside biography text
  • a pull quote inside a long paragraph

For this kind of text wrapping, floats still make sense.

When not to use floats

Do not use floats to build a modern full-page layout.

Avoid floats for:

  • page columns
  • headers and sidebars
  • card grids
  • app layouts

Use Flexbox or Grid for those layouts. They are easier to control and work better on responsive screens.

Common beginner mistakes

  • Using floats for modern page layout: use Flexbox or Grid for structural layouts.
  • Forgetting to clear the next section: text or footers may wrap beside a float when you wanted them below it.
  • Putting clearfix on the floated child: clearfix belongs on the parent container.
  • Forgetting parent height collapse: a parent with only floated children may look empty.
  • Floating without spacing: add margins so text does not touch the floated element.

Mini practice task

Look at this CSS rule:

Read-only

What does this rule do to the footer?

Check the quiz answers when you are ready.

Short quiz with answers

  1. What is the classic use case for floats?
  2. Which CSS property forces an element to move below floated content?
  3. Where should a clearfix class be applied: on the floated child or on the parent?

Answers:

  1. Wrapping text around an image or small element.
  2. clear.
  3. On the parent.

Mini practice task answer: it forces the footer to move below left and right floats instead of sitting beside them.

Small challenge

Style the article layout below.

Your goals:

  • Float .profile-pic to the right.
  • Add a left margin so the text does not touch the floated box.
  • Use clear on .next-section so it starts below the float.
Can edit
<article class="bio">
  <div class="profile-pic">Photo</div>
  <p>
    This short biography should wrap around the photo. The photo should sit on the right side of the
    text.
  </p>
</article>

<section class="next-section">
  <h3>Next section</h3>
  <p>This section should start below the floated photo.</p>
</section>

<style>
  .bio,
  .next-section {
    max-width: 420px;
    font-family: Arial, sans-serif;
    line-height: 1.5;
  }

  .profile-pic {
    width: 100px;
    height: 90px;
    display: grid;
    place-items: center;
    background-color: #dbeafe;
    border: 2px solid #2563eb;
    border-radius: 6px;
    color: #1e40af;
    font-weight: bold;
    /* Float this box to the right */

    /* Add left margin */
  }

  .next-section {
    /* Move this section below the float */

    margin-top: 16px;
    padding: 12px;
    background-color: #f3f4f6;
    border: 1px solid #d1d5db;
  }
</style>

Summary

  • float: left and float: right move elements to the side.
  • Text and inline content can wrap around floated elements.
  • Floats were historically used for layout, but today they are best for text wrapping.
  • Floated elements can cause parent height collapse.
  • clear prevents an element from sitting beside floated content.
  • clear: both moves an element below left and right floats.
  • display: flow-root on the parent is the modern way to make it wrap around its floated children.
  • A clearfix using ::after is the older technique for the same job.
  • Use Flexbox or Grid for modern page layouts instead of floats.