CSS Float and Clear

What Is CSS float?

The CSS float property moves an element to the left or right side of its container. Inline content and text can wrap around the floated element.

.image-left {
  float: left;
  margin-right: 1rem;
  margin-bottom: 1rem;
}

Floats were once used for entire page layouts, but today they are mainly used for wrapping text around images or working with older CSS codebases.

What Is CSS clear?

The CSS clear property controls whether an element can sit beside floated elements or must move below them.

.next-section {
  clear: both;
}

clear: both; means the element should move below both left-floated and right-floated elements.

Why CSS Float and Clear Are Important

• They help text wrap around images and media.
• They are common in older CSS layouts and legacy websites.
• They explain many historical CSS layout patterns.
• They help debug old themes, blogs, templates, and CMS layouts.
• They teach how document flow changes when elements are floated.
• They are useful before learning clearfix, Flexbox, and Grid alternatives.

CSS Float and Clear Cheatsheet

The following table explains the most common float and clear values.

CSS float: left

float: left; moves an element to the left side of its container. Text and inline content can flow around the right side of the floated element.

.article-image {
  float: left;
  width: 220px;
  margin-right: 1rem;
  margin-bottom: 1rem;
}

This pattern is common in articles, blogs, and editorial layouts where an image appears beside paragraph text.

CSS float: right

float: right; moves an element to the right side of its container. Text and inline content can flow around the left side of the floated element.

.sidebar-note {
  float: right;
  width: 260px;
  margin-left: 1rem;
  margin-bottom: 1rem;
}

Right floats are useful for side notes, small callouts, and floated media in text content.

CSS float: none

float: none; is the default value. The element stays in normal document flow.

.normal-box {
  float: none;
}

Use float: none; to reset a floated element when needed, especially in responsive layouts.

CSS clear: left, right, and both

The clear property controls whether an element can appear next to floated elements or must move below them.

.clear-left {
  clear: left;
}

.clear-right {
  clear: right;
}

.clear-both {
  clear: both;
}

Text Wrapping Around an Image

One of the best modern uses of float is wrapping article text around an image.

<article class="article-content">
  <img
    class="article-image"
    src="/images/css-float-example.jpg"
    alt="Example of CSS float text wrapping"
  />

  <p>
    CSS float allows text to wrap around images and other media inside article content.
  </p>
</article>

.article-image {
  float: left;
  width: min(40%, 260px);
  margin-right: 1rem;
  margin-bottom: 1rem;
}

On small screens, you may want to remove the float so the image stacks naturally.

@media (max-width: 600px) {
  .article-image {
    float: none;
    width: 100%;
    margin-right: 0;
  }
}

The Float Parent Collapse Problem

Floated children are removed from normal flow. Because of this, a parent container may collapse if it contains only floated children.

.media-card img {
  float: left;
  width: 120px;
}

/* Parent may not expand around floated child */

This is one reason floats are no longer recommended for complete page layouts.

CSS Clearfix

Clearfix is an old but common technique used to force a parent container to contain floated children.

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

Example

<div class="clearfix">
  <img class="float-left" src="/images/example.jpg" alt="Example image" />
  <p>Text beside a floated image.</p>
</div>

Modern Clearfix with display: flow-root

A modern way to contain floats is to use display: flow-root; on the parent.

.float-container {
  display: flow-root;
}

.float-container img {
  float: left;
  margin-right: 1rem;
}

flow-root creates a new block formatting context and avoids older clearfix hacks.

Float vs Flexbox and Grid

Floats are not recommended for modern full-page layout. Use Flexbox and Grid instead.

Responsive Float Patterns

Floats can cause cramped layouts on mobile screens. Use media queries to reset floats when needed.

.article-image {
  float: right;
  width: 280px;
  margin-left: 1rem;
  margin-bottom: 1rem;
}

@media (max-width: 600px) {
  .article-image {
    float: none;
    width: 100%;
    margin-left: 0;
  }
}

This keeps article images readable and prevents small-screen overflow.

CSS Float, Clear, and Accessibility

Floats visually move elements, but the screen reader and keyboard experience still depends on the HTML source order.

• Keep HTML content order logical.
• Use meaningful alt text for floated images.
• Do not use float to create confusing visual order.
• Ensure text remains readable around floated content.
• Reset floats on mobile when wrapping becomes cramped.

CSS Float, Clear, and SEO

Float and clear do not directly affect rankings, but they can affect readability, mobile usability, accessibility, and page quality.

• Readable wrapped text improves user experience.
• Responsive float resets improve mobile usability.
• Logical source order supports accessibility and content clarity.
• Good image placement can improve article presentation.
• Avoid broken float layouts that make content hard to read.

Common Float and Clear Mistakes

• Using floats for complete page layouts instead of Flexbox or Grid.
• Forgetting to clear floats after floated sections.
• Not using clearfix or display: flow-root; for parent containers.
• Creating mobile layouts where text becomes too narrow beside floated images.
• Using float to visually reorder important content.
• Forgetting margins around floated images.
• Expecting floated elements to behave like Flexbox items.
• Not testing legacy float layouts in responsive views.

CSS Float and Clear Best Practices

• Use float mainly for text wrapping around images.
• Use Flexbox or Grid for modern page layouts.
• Add margins around floated elements for readable spacing.
• Use clear: both; when following content must move below floats.
• Use display: flow-root; to contain floats in modern CSS.
• Use clearfix only when supporting older patterns.
• Reset floats on small screens when needed.
• Keep source order logical for accessibility.
• Test floated content on mobile and desktop.

Key Takeaways

• float moves an element left or right and allows text wrapping.
• clear controls whether content can sit beside floated elements.
• clear: both; moves content below left and right floats.
• Floats can cause parent collapse without clearfix or flow-root.
• Use floats for text wrapping, not modern full-page layouts.
• Use Flexbox and Grid for modern layout systems.