CSS Float and Clear

CSS floats let text wrap around content, a pattern originally designed for images and pull quotes rather than full page grids.

What you’ll learn

Explain why floats originated around flowing text.
Use clear to move below floated content.
Prefer Flexbox or Grid for general page layouts.

Understand the concept

float: left or float: right shifts a box to one side so surrounding inline content can wrap. clear: both prevents an element from sitting alongside floats. A containing element with display: flow-root establishes a block formatting context that includes its floats.

For page-wide columns, headers and card grids, prefer Flexbox or Grid; floats remain useful for text wrapping around illustrations.

What the browser evaluates

Text wraps beside floated boxes; clear moves following content below earlier floats; flow-root contains the floated element.

Wrap a paragraph beside an illustration

A floated colored placeholder lets text occupy the available side.

HTML

<article class="float-story"><div class="story-image" aria-hidden="true">Photo</div><p>Coastal walks are best planned around daylight and weather. The paragraph naturally wraps beside the photo and then continues below it.</p></article>

CSS

.float-story { display: flow-root; max-width: 350px; padding: 13px; background: #f1f5f9; border-radius: 8px; }
.story-image { float: left; width: 96px; height: 92px; margin: 0 13px 8px 0; background: #99f6e4; border-radius: 8px; display: grid; place-items: center; color: #115e59; font-weight: 700; }
.float-story p { margin: 0; line-height: 1.5; }

Rendered output

Coastal walks are best planned around daylight and weather. The paragraph naturally wraps beside the photo and then continues below it.

Observe: The text fills the space beside the turquoise illustration rather than beginning beneath it.

Clear a following section

Prevent the footer from rising beside the float.

HTML

<article class="float-story"><div class="story-image" aria-hidden="true">Image</div><p>A short paragraph sits next to the float.</p><footer class="story-footer">End of article</footer></article>

CSS

.float-story { display: flow-root; max-width: 350px; padding: 13px; background: #f1f5f9; border-radius: 8px; }
.story-image { float: left; width: 95px; height: 74px; margin-right: 13px; background: #bfdbfe; border-radius: 7px; text-align: center; padding-top: 23px; box-sizing: border-box; }
.float-story p { margin: 0; }
.story-footer { clear: both; padding-top: 8px; border-top: 1px solid #cbd5e1; font-weight: 700; }

Rendered output

A short paragraph sits next to the float.

Observe: The footer starts below the floated box, even though the paragraph is short.

Explain the result

Text wraps beside floated boxes; clear moves following content below earlier floats; flow-root contains the floated element.

Compare the two examples: identify the selector, each changed property, and which visible part of the output proves that the CSS took effect.

Common mistakes to avoid

Avoid float-based columns for modern responsive application layouts.
An unchecked float can protrude from a container; use flow-root or a suitable formatting context.

Try it yourself

Remove clear:both from the footer and observe where it is laid out. Restore clear and try float:right.

Before changing the code, predict what will change. Then verify by checking the rendered result.

What you should remember

Floats are useful for text wrapping; clear and flow-root help manage their boundaries.

Revisit the rendered examples if the rule still feels abstract. Change one declaration at a time so you can connect cause and effect.

Reaching the recap and completing the quizzes are separate milestones.

Next lesson: Centering Elements with CSS →

CSS Float and Clear