CSS Float Floating Elements Clearfix

How Float Changes Layout

CSS float moves an element to the inline start or end and lets following inline content wrap around it. It remains useful for figures and pull quotes; use Flexbox or Grid for page and component layout.

A floated box is shifted left or right within its containing block. Later inline content flows around its margin box, while block boxes may extend behind it. The float still influences line layout even though it is taken out of normal block flow.

Set a sensible width for floated media and leave enough space for adjacent text. On narrow containers, a large fixed float can squeeze text into unreadable columns.

Clearing Floats

The clear property moves an element below earlier floats on the selected side. Use clear: both only when the next element must begin below all floats; clearing every child can create unnecessary vertical gaps.

A container that holds only floated children may appear to have zero height. Modern flow-root creates a new block formatting context and contains floats without pseudo-element tricks. The clearfix pattern remains relevant in legacy code.

Logical Values and Responsive Behavior

Use inline-start and inline-end where browser requirements permit so layout follows writing direction. Provide max-width: 100% for images and remove the float at a breakpoint when wrapping no longer leaves a useful text measure.

Source order remains the reading and keyboard order. Float changes visual wrapping, not document semantics, so place the figure near the paragraph it describes.

Float, Flexbox, or Grid

Choose float when text should wrap around an object. Choose Flexbox for alignment along one dimension and Grid for rows and columns. Do not build navigation bars, card grids, or entire page shells with floats; those patterns require clearing hacks and do not express the intended layout.

Responsive Floated Figure

.article-figure {
        float: inline-start;
        width: min(18rem, 45%);
        margin: 0 1rem 0.75rem 0;
      }

      .article-body {
        display: flow-root;
      }

      @media (max-width: 38rem) {
        .article-figure {
          float: none;
          width: 100%;
          margin: 0 0 1rem;
        }
      }

Legacy Clearfix

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

Prefer display: flow-root for new containment code.

Before you move on