Describe `float`s and how they work.

TL;DR

float moves a box to the inline start or end of its containing block and lets following inline content wrap around it. It was historically used for page layouts, but Flexbox and Grid are better for arranging interface regions. Floats remain useful for editorial effects such as wrapping article text around an image. Use clear to move later content below floats and display: flow-root when a parent should contain its floated children.

Describe `float`s and how they work.

A floated box is shifted to one side and taken out of normal block-flow calculations, but it still affects surrounding line boxes. This is why text wraps around a float while an absolutely positioned element is simply overlaid without reserving wrapping space.

Editorial use

<article class="story">
  <img
    class="story__photo"
    src="speaker.jpg"
    alt="Ada speaking at a conference" />
  <p>Article text wraps around the photograph until it passes the float.</p>
</article>

.story {
  display: flow-root;
}

.story__photo {
  float: inline-start;
  width: 12rem;
  margin-inline-end: 1rem;
  margin-block-end: 0.5rem;
}

The logical value inline-start follows the writing direction. Where support requirements favor physical values, left and right remain available.

Clearing and containing floats

clear moves a block below earlier floats on the specified side. If a container has only floated children, its normal-flow height may not include them. Creating a BFC with display: flow-root makes the container enclose those floats.

Legacy code may use a generated ::after clearfix or overflow: hidden. Preserve those when maintaining an older layout, but prefer flow-root for a new float container because the intent is clearer and it does not clip overflow.

When not to use floats

Do not use floats to build application grids, navigation bars, or general alignment. Flexbox handles one-dimensional distribution and Grid handles two-dimensional tracks without clearfixes or source-order tricks. Keep the HTML source order meaningful for reading and keyboard navigation regardless of the visual layout.

Exercises

Beta

Describe `float`s and how they work.

TL;DR