Skillversitas

CSS Float & Clear

What is Float?

The float property was originally designed to wrap text around images — similar to a magazine layout. However, for years float was also used as the main layout technique before Flexbox and CSS Grid were introduced.

Float takes an element out of the normal document flow and moves it to the left or right of its container. Other elements flow (wrap) around the floated element.

Float Values

Value Description
left Element shifts to the left, other content flows to its right
right Element shifts to the right, other content flows to its left
none Default — no float

The Float Problem: Collapsing Container

The most common problem with float is container collapse. When all elements inside a container are floated, the container loses its height (height: 0) because the floated elements are out of the normal flow.

.container {
  background-color: #3498db;
}

.floated-item {
  float: left;
  width: 100px;
  height: 100px;
}

/* Container collapse! Height = 0 because all children are floated */

Solution: Clearfix

The clearfix technique uses the ::after pseudo-element to force the container to have the correct height:

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

Or with the more modern version:

.clearfix::after {
  content: '';
  display: block;
  clear: both;
}

The Clear Property

clear determines on which side a float is not allowed to be:

Value Description
left No float allowed on the left
right No float allowed on the right
both No float allowed on either side
.clear-both {
  clear: both;
}

Code Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Float & Clear</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: Arial, sans-serif;
      background-color: #f5f5f5;
      padding: 20px;
      color: #333;
    }

    h1 {
      margin-bottom: 25px;
    }

    .section {
      background-color: white;
      border-radius: 8px;
      padding: 20px;
      margin-bottom: 25px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
    }

    h2 {
      margin-bottom: 15px;
      color: #2c3e50;
    }

    p {
      line-height: 1.6;
      color: #555;
      margin-bottom: 10px;
    }

    code {
      background-color: #f0f0f0;
      padding: 2px 6px;
      border-radius: 3px;
      font-size: 13px;
    }

    /* === Float Image Wrap === */
    .article-demo {
      max-width: 600px;
    }

    .article-demo h3 {
      margin-bottom: 12px;
      color: #2c3e50;
    }

    .float-image {
      float: left;
      width: 200px;
      height: 140px;
      background-color: #3498db;
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: bold;
      font-size: 14px;
      margin-right: 20px;
      margin-bottom: 10px;
      border-radius: 6px;
    }

    .float-image-right {
      float: right;
    }

    /* === Container Collapse Demo === */
    .collapse-demo {
      background-color: #3498db;
      padding: 10px;
      border-radius: 6px;
      margin-bottom: 10px;
    }

    .collapse-floated {
      float: left;
      width: 100px;
      height: 80px;
      background-color: #e74c3c;
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      font-weight: bold;
      margin: 5px;
      border-radius: 4px;
    }

    .collapse-notice {
      background-color: #fff3cd;
      border: 1px solid #ffc107;
      padding: 10px;
      border-radius: 4px;
      font-size: 13px;
      color: #856404;
      margin-top: 10px;
    }

    /* === Clearfix Solution === */
    .clearfix-demo {
      background-color: #2ecc71;
      padding: 10px;
      border-radius: 6px;
      margin-bottom: 10px;
    }

    .clearfix-demo::after {
      content: '';
      display: table;
      clear: both;
    }

    /* === Multi-Column Layout === */
    .column-demo {
      background-color: #ecf0f1;
      padding: 15px;
      border-radius: 6px;
      overflow: hidden;
    }

    .column {
      float: left;
      width: 31.33%;
      margin: 0 1%;
      background-color: white;
      padding: 15px;
      border-radius: 6px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }

    .column h4 {
      margin-bottom: 8px;
      color: #2c3e50;
    }

    .column p {
      font-size: 13px;
      line-height: 1.5;
    }

    /* === Clear Demo === */
    .clear-demo {
      background-color: #ecf0f1;
      padding: 15px;
      border-radius: 6px;
    }

    .clear-box {
      padding: 10px;
      margin-bottom: 10px;
      font-size: 13px;
      font-weight: bold;
      color: white;
      border-radius: 4px;
    }

    .float-left {
      float: left;
      width: 150px;
      background-color: #3498db;
    }

    .clear-left {
      clear: left;
      background-color: #e74c3c;
    }

    .clear-both-box {
      clear: both;
      background-color: #2ecc71;
    }

    /* === Card Grid with Float === */
    .card-grid {
      overflow: hidden;
    }

    .card-grid::after {
      content: '';
      display: table;
      clear: both;
    }

    .card {
      float: left;
      width: calc(33.333% - 20px);
      margin: 10px;
      background-color: white;
      border-radius: 8px;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
      overflow: hidden;
    }

    .card-image {
      height: 120px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-weight: bold;
      font-size: 16px;
    }

    .card-image-1 { background-color: #e74c3c; }
    .card-image-2 { background-color: #3498db; }
    .card-image-3 { background-color: #2ecc71; }

    .card-body {
      padding: 15px;
    }

    .card-body h4 {
      margin-bottom: 8px;
      color: #2c3e50;
      font-size: 15px;
    }

    .card-body p {
      font-size: 13px;
      line-height: 1.5;
      color: #666;
    }

    /* === Float vs Flexbox Comparison === */
    .comparison {
      display: flex;
      gap: 20px;
      flex-wrap: wrap;
    }

    .comparison-box {
      flex: 1;
      min-width: 250px;
      background-color: #ecf0f1;
      padding: 15px;
      border-radius: 6px;
    }

    .comparison-box h4 {
      margin-bottom: 10px;
      color: #2c3e50;
    }

    .float-layout {
      overflow: hidden;
    }

    .float-layout::after {
      content: '';
      display: table;
      clear: both;
    }

    .float-item {
      float: left;
      width: 60px;
      height: 60px;
      margin: 5px;
      background-color: #3498db;
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      font-weight: bold;
      border-radius: 4px;
    }

    .flex-layout {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
    }

    .flex-item {
      width: 60px;
      height: 60px;
      background-color: #2ecc71;
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      font-weight: bold;
      border-radius: 4px;
    }
  </style>
</head>
<body>

  <h1>CSS Float & Clear</h1>

  <!-- Float Image Wrap -->
  <div class="section">
    <h2>Float for Text Wrapping</h2>
    <p>Float's original use — wrapping text around an image:</p>
    <div class="article-demo">
      <h3>Article about CSS Float</h3>
      <div class="float-image">Image</div>
      <p>
        Float was originally designed to create magazine-like layouts, where
        images are placed on the left or right and text flows around them.
        This concept is very useful for building articles with images that
        blend seamlessly with the text. Float allows an element to leave the
        normal document flow and be placed on a certain side, while other
        content continues to flow around it.
      </p>
      <p>
        Although flexbox and grid are now more commonly used for layout,
        float is still relevant for simple cases such as wrapping text around
        images in articles or blog posts.
      </p>
      <div style="clear: both;"></div>
    </div>
  </div>

  <!-- Container Collapse -->
  <div class="section">
    <h2>The Container Collapse Problem</h2>
    <p>When all elements are floated, the container loses its height:</p>
    <div class="collapse-demo">
      <div class="collapse-floated">Float 1</div>
      <div class="collapse-floated">Float 2</div>
      <div class="collapse-floated">Float 3</div>
    </div>
    <div class="collapse-notice">
      Note: container collapse (height shrinks) because all children are floated.
      Add a clearfix to fix it.
    </div>
  </div>

  <!-- Clearfix Solution -->
  <div class="section">
    <h2>Solution: Clearfix</h2>
    <p>Using the ::after pseudo-element to clear floats:</p>
    <div class="clearfix-demo">
      <div class="collapse-floated">Float 1</div>
      <div class="collapse-floated">Float 2</div>
      <div class="collapse-floated">Float 3</div>
    </div>
    <p style="font-size: 13px; color: #888;">The container now has the correct height thanks to the clearfix.</p>
  </div>

  <!-- Multi-Column Layout -->
  <div class="section">
    <h2>Multi-Column Layout with Float</h2>
    <p>Float was once the main technique for building column layouts:</p>
    <div class="column-demo clearfix-demo">
      <div class="column">
        <h4>Column 1</h4>
        <p>Float enables simple column layouts. Each column has a percentage width and margin for spacing.</p>
      </div>
      <div class="column">
        <h4>Column 2</h4>
        <p>Each column is floated left with a width calculated using percentages. Margins provide the space between columns.</p>
      </div>
      <div class="column">
        <h4>Column 3</h4>
        <p>A clearfix on the parent ensures the container has the correct height even though all children are floated.</p>
      </div>
    </div>
  </div>

  <!-- Clear Property -->
  <div class="section">
    <h2>The Clear Property</h2>
    <p>Clear forces an element below any existing floats:</p>
    <div class="clear-demo clearfix-demo">
      <div class="clear-box float-left">Float Left</div>
      <div class="clear-box clear-left">Clear Left — Moves below the float</div>
      <div class="clear-box clear-both-box">Clear Both — Moves below all floats</div>
    </div>
  </div>

  <!-- Card Grid -->
  <div class="section">
    <h2>Card Grid with Float</h2>
    <p>Building a card grid using float and clearfix:</p>
    <div class="card-grid">
      <div class="card">
        <div class="card-image card-image-1">CSS</div>
        <div class="card-body">
          <h4>CSS Fundamental</h4>
          <p>Learn CSS fundamentals including selectors, properties, and the box model.</p>
        </div>
      </div>
      <div class="card">
        <div class="card-image card-image-2">HTML</div>
        <div class="card-body">
          <h4>HTML Structure</h4>
          <p>Understanding correct HTML structure as the foundation of web development.</p>
        </div>
      </div>
      <div class="card">
        <div class="card-image card-image-3">JS</div>
        <div class="card-body">
          <h4>JavaScript Basic</h4>
          <p>JavaScript basics for building interactive web pages.</p>
        </div>
      </div>
    </div>
  </div>

  <!-- Float vs Flexbox -->
  <div class="section">
    <h2>Float vs Flexbox</h2>
    <p>A comparison of float and flexbox techniques for the same layout:</p>
    <div class="comparison">
      <div class="comparison-box">
        <h4>With Float</h4>
        <div class="float-layout">
          <div class="float-item">1</div>
          <div class="float-item">2</div>
          <div class="float-item">3</div>
          <div class="float-item">4</div>
          <div class="float-item">5</div>
        </div>
        <p style="font-size: 12px; color: #888; margin-top: 10px;">
          Requires a clearfix, no built-in gap, manual alignment
        </p>
      </div>
      <div class="comparison-box">
        <h4>With Flexbox</h4>
        <div class="flex-layout">
          <div class="flex-item">1</div>
          <div class="flex-item">2</div>
          <div class="flex-item">3</div>
          <div class="flex-item">4</div>
          <div class="flex-item">5</div>
        </div>
        <p style="font-size: 12px; color: #888; margin-top: 10px;">
          No clearfix needed, built-in gap, automatic alignment
        </p>
      </div>
    </div>
  </div>

</body>
</html>

Code Explanation

  1. Float Image Wrap — An article with an image floated to the left. The text flows around the image naturally. This is the original use of float and is still relevant to this day.

  2. Container Collapse — A blue container with three floated elements. The container collapses (height close to 0) because all children are out of the normal flow.

  3. Clearfix — A green container that uses the ::after pseudo-element to clear the float. The container now has the correct height.

  4. Multi-Column Layout — Three columns, each floated left with a width of 31.33% and 1% margin. This is the classic column layout technique.

  5. Clear Property — A red element with clear: left forcing it below the floated element. A green element with clear: both forcing it below all floats.

  6. Card Grid — A card grid using float with width: calc(33.333% - 20px). The calc() computation accounts for the margin.

  7. Float vs Flexbox — A side-by-side comparison: float requires a clearfix and has no built-in gap, while flexbox has a built-in gap and automatic alignment.


Everyday Use Cases

<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }

    body {
      font-family: Arial, sans-serif;
      background-color: #f5f5f5;
      color: #333;
    }

    /* === Blog Article Layout === */
    .article-header {
      background-color: #2c3e50;
      color: white;
      padding: 40px 20px;
      text-align: center;
    }

    .article-header h1 {
      font-size: 28px;
      margin-bottom: 10px;
    }

    .article-container {
      max-width: 720px;
      margin: 30px auto;
      padding: 0 20px;
    }

    .article-content {
      background-color: white;
      padding: 30px;
      border-radius: 8px;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    }

    .article-content h2 {
      font-size: 22px;
      margin: 25px 0 12px;
      color: #2c3e50;
    }

    .article-content p {
      line-height: 1.8;
      color: #555;
      margin-bottom: 16px;
    }

    .article-image-float {
      float: left;
      width: 250px;
      height: 170px;
      background-color: #3498db;
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: bold;
      margin-right: 20px;
      margin-bottom: 10px;
      border-radius: 6px;
    }

    .article-image-float-right {
      float: right;
      background-color: #2ecc71;
    }

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

    /* === News Ticker (float for scrolling text) === */
    .ticker-section {
      background-color: white;
      padding: 20px;
      border-radius: 8px;
      margin: 0 20px 20px;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    }

    .ticker-label {
      float: left;
      background-color: #e74c3c;
      color: white;
      padding: 6px 14px;
      font-size: 12px;
      font-weight: bold;
      border-radius: 4px;
      margin-right: 15px;
    }

    .ticker-text {
      overflow: hidden;
      line-height: 30px;
      font-size: 14px;
      color: #555;
    }

    /* === Sidebar + Content Float Layout === */
    .page-layout {
      max-width: 1000px;
      margin: 0 auto;
      padding: 20px;
      overflow: hidden;
    }

    .sidebar-float {
      float: left;
      width: 240px;
      margin-right: 20px;
    }

    .sidebar-float .sidebar-box {
      background-color: white;
      border-radius: 8px;
      padding: 16px;
      margin-bottom: 15px;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    }

    .sidebar-float .sidebar-box h3 {
      font-size: 16px;
      margin-bottom: 12px;
      color: #2c3e50;
    }

    .sidebar-float .sidebar-box ul {
      list-style: none;
    }

    .sidebar-float .sidebar-box ul li {
      padding: 6px 0;
      border-bottom: 1px solid #f0f0f0;
    }

    .sidebar-float .sidebar-box ul li:last-child {
      border-bottom: none;
    }

    .sidebar-float .sidebar-box ul li a {
      text-decoration: none;
      color: #555;
      font-size: 14px;
    }

    .sidebar-float .sidebar-box ul li a:hover {
      color: #3498db;
    }

    .main-float {
      overflow: hidden;
    }

    .main-float .content-box {
      background-color: white;
      border-radius: 8px;
      padding: 24px;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
      margin-bottom: 15px;
    }

    .main-float h2 {
      font-size: 20px;
      margin-bottom: 12px;
      color: #2c3e50;
    }

    .main-float p {
      line-height: 1.7;
      color: #555;
    }
  </style>
</head>
<body>

  <!-- Article with Float Images -->
  <div class="article-header">
    <h1>CSS Float Guide</h1>
    <p>Understanding float from the basics to modern layout techniques</p>
  </div>

  <div class="article-container">
    <div class="article-content clearfix">
      <h2>What is Float?</h2>
      <div class="article-image-float">Image 1</div>
      <p>
        Float is a CSS property that takes an element out of the normal
        document flow and moves it to the left or right. Other content flows
        around the floated element. Originally, float was designed to create
        magazine-like layouts where images are placed on a certain side
        and text flows around them.
      </p>
      <p>
        Before Flexbox and CSS Grid were introduced, float was used as the
        main layout technique for building columns, navigation, and various
        other layout components. Although there are better techniques now,
        understanding float is still important for maintaining legacy code
        and for understanding how CSS has worked historically.
      </p>

      <h2>Container Collapse</h2>
      <div class="article-image-float article-image-float-right">Image 2</div>
      <p>
        The most common problem with float is container collapse. When all
        elements inside a container are floated, the container loses its height
        because the floated elements leave the normal flow. The solution is to
        use the clearfix technique, which leverages a pseudo-element to clear
        floats automatically.
      </p>
      <p>
        Clearfix is a technique every web developer must understand.
        Without a clearfix, the container background will not be visible,
        spacing becomes inconsistent, and the layout can fall apart in various
        browsers.
      </p>
    </div>
  </div>

  <!-- Sidebar + Main Content Float Layout -->
  <div class="page-layout clearfix">
    <div class="sidebar-float">
      <div class="sidebar-box">
        <h3>Categories</h3>
        <ul>
          <li><a href="#">CSS Basics</a></li>
          <li><a href="#">Layout</a></li>
          <li><a href="#">Responsive</a></li>
          <li><a href="#">Animation</a></li>
        </ul>
      </div>
      <div class="sidebar-box">
        <h3>Popular Articles</h3>
        <ul>
          <li><a href="#">Complete Flexbox Guide</a></li>
          <li><a href="#">CSS Grid Guide</a></li>
          <li><a href="#">Box Model Tips</a></li>
        </ul>
      </div>
    </div>

    <div class="main-float">
      <div class="content-box">
        <h2>Float vs Flexbox</h2>
        <p>
          Flexbox offers an easier and more powerful way to create
          layouts than float. With flexbox, you do not need to worry
          about clearfix, a built-in gap is available, and alignment can be done
          easily using properties such as justify-content and align-items.
        </p>
      </div>
      <div class="content-box">
        <h2>When to Use Float?</h2>
        <p>
          Use float for: wrapping text around images, building simple column
          layouts in HTML emails (which do not support flex/grid), and
          maintaining existing legacy code. For all modern layout needs,
          use Flexbox or CSS Grid.
        </p>
      </div>
    </div>
  </div>

</body>
</html>

In the example above:
- Float Image Wrap — An article with two floated images: one to the left, one to the right. The text flows naturally around both.
- Sidebar Layout — The sidebar is floated left with a fixed width; the main content uses overflow: hidden (triggers block formatting context) to fill the remaining space.
- Clearfix — Used on the parent to ensure the container has the correct height.


When to Use Float vs Flexbox/Grid?

Use Float Use Flexbox/Grid
Wrapping text around images Column and row layouts
HTML email (legacy compatibility) Navigation bars
Maintaining legacy code Card grids
Floating labels Centering elements
Responsive layouts

Conclusion

  • Float takes an element out of the normal flow and moves it left/right. Other content flows around it.
  • The container collapse problem occurs when all children are floated — the container loses its height.
  • Clearfix is the standard solution for container collapse using the ::after pseudo-element.
  • Clear forces an element below existing floats (clear: both is the most commonly used).
  • Float is still useful for wrapping text around images, but for modern layouts use Flexbox or CSS Grid.
  • Understanding float is still important for maintaining legacy code and understanding the history of CSS layout.