On this page

Float & Clear (Legacy, and Why to Avoid It)

Badar KhalilUpdated September 30, 2026 5 min read

CSS Float and Clear: Legacy Layout and Modern Alternatives

Focus keyword: CSS float and clear. Before flexbox and grid, float was the main tool for building multi-column layouts. Today it is considered legacy for layout, but it is still useful for one job: wrapping text around an image. In this lesson you will learn how float and clear work, why float layouts cause problems, how to fix them with flow-root and clearfix, and what to use instead.

CSS float, clear both, clearfix hack, display flow-root, float vs flexbox, float vs grid, shape-outside, text wrap around image, collapsed parent, float legacy layout, modern CSS layout, legacy code maintenance, initial-letter drop cap, float inline-start, logical float.

1. What Is Float?

The float property pushes an element to the left or right edge of its container. The element is taken out of normal block flow, and inline content (text) wraps around it. Values: left, right, none (default), plus the logical values inline-start and inline-end that adapt to writing direction.

A floated element becomes block-level automatically.
Floats need an explicit width (or a replaced element like an image), otherwise they shrink to fit.
Floats only move horizontally. There is no vertical float.
Margins of floats never collapse.

2. What Is Clear?

The clear property tells an element to move below earlier floats. Values: left, right, both, none, and inline-start or inline-end. Use clear: both on a footer or on an empty element to force it under all floats.

3. The Collapsed Parent Problem

Since floated children leave the normal flow, a parent containing only floats has a height of 0. Its border and background collapse and following content wraps awkwardly. This was the famous float bug of the old web.

Fix 1: display: flow-root (modern)

Add display: flow-root to the parent. It creates a block formatting context that contains floats with no side effects.

Fix 2: Clearfix hack (legacy)

Add an empty generated element at the end of the parent: .clearfix::after { content: ''; display: table; clear: both; }. You will still see this in older projects.

Fix 3: overflow

Setting overflow: hidden or auto on the parent also contains floats, but it can clip shadows and dropdowns.

4. Why You Should Avoid Float for Layout

Fragile: layouts break when content is taller, shorter or wider than expected.
Needs hacks: clearfix, fixed widths and negative margins.
No real alignment: vertical centering and equal height columns are hard.
Not responsive by nature: columns need many media queries.
Source order problems: float right reverses visual order, which confuses keyboard and screen reader users.
Better tools exist: flexbox for one-dimensional rows and columns, grid for two-dimensional layouts.

5. The Legitimate Use: Text Wrap Around Images

Flexbox and grid cannot make text flow around a shape. Float can. Combine it with shape-outside and shape-margin to wrap text around a circle or a polygon, which is a popular editorial design trend. Give the floated element a width, a margin on the side facing the text and, for shapes, a matching clip-path or border-radius.

6. Float vs Flexbox vs Grid

Float: text wrap, legacy code.
Flexbox: navigation, toolbars, card rows, centering, equal height.
Grid: page layouts, galleries, dashboards, responsive card grids.

7. Migrating Legacy Float Code

Find the float container and replace clearfix with display: flow-root or convert it to flex.
Replace percentage widths plus float with display: flex and flex: 1, or with grid-template-columns.
Remove negative margin hacks and use gap.
Test on small screens and with zoom.

8. Common Mistakes

Forgetting to clear floats, so the footer climbs up beside the content.
Clearing with an extra empty div in HTML.
Using float and flex on the same element (float is ignored on flex items).
Floating an element without width.
Using float to build a complete layout in new projects.

Key Takeaways

Float wraps content around an element, and clear pushes content below floats. Contain floats with display: flow-root, keep float only for text wrapping and shapes, and use flexbox and grid for layouts.

Try it Yourself HTML

<style>
  body { font: 18px/1.6 system-ui, sans-serif; padding: 16px; max-width: 600px; }
  .pic { float: left; width: 120px; height: 120px; background: linear-gradient(135deg, #e76f51, #e9c46a); margin: 4px 16px 8px 0; border-radius: 8px; }
</style>
<div class='pic'></div>
<p>Float lets text wrap around an element. This is the classic use case, like a photo inside an article. The paragraph keeps flowing around the box and goes below it when there is no more room next to the floated element.</p>

Output

Press Run to execute.

Try it Yourself HTML

<style>
  body { font: 16px system-ui, sans-serif; padding: 16px; }
  .row { border: 3px solid #264653; margin-bottom: 20px; }
  .col { float: left; width: 50%; box-sizing: border-box; padding: 16px; color: #fff; }
  .c1 { background: #2a9d8f; }
  .c2 { background: #e76f51; }
  .clearfix::after { content: ''; display: table; clear: both; }
</style>
<p>Collapsed parent (border has no height):</p>
<div class='row'><div class='col c1'>Left</div><div class='col c2'>Right</div></div>
<p style='clear: both'>Fixed with clearfix:</p>
<div class='row clearfix'><div class='col c1'>Left</div><div class='col c2'>Right</div></div>

Output

Press Run to execute.

Try it Yourself HTML

<style>
  body { font: 16px system-ui, sans-serif; padding: 16px; }
  .row { border: 3px solid #264653; margin-bottom: 20px; display: flow-root; }
  .col { float: left; width: 50%; box-sizing: border-box; padding: 16px; color: #fff; }
  .c1 { background: #2a9d8f; }
  .c2 { background: #e76f51; }
  .footer { clear: both; background: #eee; padding: 10px; }
</style>
<div class='row'><div class='col c1'>Left</div><div class='col c2'>Right</div></div>
<div class='footer'>Footer with clear: both</div>

Output

Press Run to execute.

Try it Yourself HTML

<style>
  body { font: 18px/1.6 system-ui, sans-serif; padding: 16px; max-width: 640px; }
  .circle {
    float: left; width: 160px; height: 160px; margin-right: 10px;
    background: radial-gradient(circle at 30% 30%, #ffd166, #ef476f);
    border-radius: 50%;
    shape-outside: circle(50%);
    shape-margin: 12px;
  }
</style>
<div class='circle'></div>
<p>With shape-outside, the text follows the curved edge of the circle instead of the rectangular box. This editorial effect can only be done with float. Try changing the shape to ellipse or polygon and resize the preview to see how the text reflows around the shape in a natural way.</p>

Output

Press Run to execute.

Try it Yourself HTML

<style>
  body { font: 16px system-ui, sans-serif; padding: 16px; }
  .layout { display: flex; gap: 16px; }
  .layout > div { flex: 1; padding: 16px; color: #fff; }
  .c1 { background: #2a9d8f; }
  .c2 { background: #e76f51; }
  .c3 { background: #264653; }
</style>
<p>Modern replacement: flexbox, no clearfix, equal height, real gap.</p>
<div class='layout'>
  <div class='c1'>Column 1</div>
  <div class='c2'>Column 2 has more text to show that all columns keep equal height automatically.</div>
  <div class='c3'>Column 3</div>
</div>

Output

Press Run to execute.

Try it Yourself JAVASCRIPT

const methods = [
  { name: 'clearfix ::after', modern: false },
  { name: 'overflow: hidden', modern: false },
  { name: 'display: flow-root', modern: true },
  { name: 'flexbox container', modern: true },
  { name: 'grid container', modern: true }
];

methods.forEach(function (m) {
  console.log(m.name + ' -> ' + (m.modern ? 'recommended' : 'legacy'));
});

Output

Press Run to execute.

Exercise: Wrap Text Around an AvatarHTML

Float the avatar to the left with a 16px right margin so the paragraph wraps around it. Make the avatar a circle and use shape-outside so the text hugs the curve.

Try it Yourself HTML

<style>
  .avatar { width: 100px; height: 100px; background: tomato; }
</style>
<div class='avatar'></div>
<p>Long paragraph text goes here. Add enough words so that the text wraps around the floated avatar and continues below it. Float is still useful for this kind of editorial layout.</p>

Output

Press Run to execute.

Show expected output

Avatar floats left, is circular and text wraps along the circle using shape-outside

This is a self-check — compare your result with the expected output above.

Exercise: Convert a Float Layout to FlexboxHTML

Rewrite this two column float layout using display: flex and gap. Remove the clearfix and the fixed percentage widths.

Try it Yourself HTML

<style>
  .row::after { content: ''; display: table; clear: both; }
  .a { float: left; width: 48%; margin-right: 4%; background: #8ecae6; }
  .b { float: left; width: 48%; background: #ffb703; }
</style>
<div class='row'><div class='a'>A</div><div class='b'>B</div></div>

Output

Press Run to execute.

Show expected output

Row uses display: flex with gap, columns use flex: 1, no float and no clearfix

This is a self-check — compare your result with the expected output above.

Was this page helpful?

CSS Float and Clear: Legacy Layout and Modern Alternatives

Trending keywords covered in this lesson

1. What Is Float?

2. What Is Clear?

3. The Collapsed Parent Problem

Fix 1: display: flow-root (modern)

Fix 2: Clearfix hack (legacy)

Fix 3: overflow

4. Why You Should Avoid Float for Layout

5. The Legitimate Use: Text Wrap Around Images

6. Float vs Flexbox vs Grid

7. Migrating Legacy Float Code

8. Common Mistakes

Key Takeaways