Float in CSS

Float in CSS moves an element to the left or right side of its container and allows inline content to wrap around it. It was originally designed for magazine-like layouts, where text flows around images. Before flexbox and grid became common, float was also heavily used for full page layouts and multi-column designs. Today, float is still valid CSS, but its best use is more specific.

Understanding float is important because older websites, WordPress themes, tutorials, and legacy layouts still use it. Float also explains why some layout bugs happen when an element is removed from normal flow. Even if you mostly use flexbox and grid, knowing float helps you debug real CSS.

Basic Float Syntax

The float property accepts values such as left, right, none, and logical values like inline-start and inline-end. The most common beginner values are left, right, and none.

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

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

The first rule floats the image to the left and adds right margin so text does not touch it. The second rule floats the image to the right and adds left margin. Without margin, the wrapped text can sit too close to the floated element.

float: left

The value left moves the element to the left side of its containing block. Inline content that follows can wrap around the right side of the floated element.

.portrait {
  float: left;
  width: 180px;
  margin: 0 1rem 1rem 0;
}

This is a classic article image pattern. The image sits on the left, and paragraph text wraps around it. The margin creates breathing room between the image and the text.

float: right

The value right moves the element to the right side of its containing block. Inline content can wrap around the left side of the floated element.

.side-note {
  float: right;
  width: 220px;
  margin: 0 0 1rem 1rem;
}

Right floats can be useful for small notes, images, pullouts, and secondary blocks inside articles. They should be used carefully on narrow screens because the remaining text width may become too small.

float: none

The default value is none. It means the element does not float and remains in normal flow.

.image {
  float: none;
}

This is useful when overriding a float at a smaller screen size. A floated image on desktop may need to become normal block content on mobile.

Float and Normal Flow

A floated element is taken partly out of normal flow. Other block boxes behave as if the floated element is not taking normal vertical space, while inline content can wrap around it. This hybrid behavior is what makes float useful and confusing at the same time.

If a parent contains only floated children, the parent may collapse to zero height because floats do not expand the parent in the usual way. This is one of the most common float problems.

The Collapsed Parent Problem

Consider a container with floated cards inside. The cards may appear visually, but the parent background or border may not wrap around them because the parent does not calculate height from floated children normally.

.card {
  float: left;
  width: 33.333%;
}

If the parent has a background color, it may appear missing because the parent height collapsed. This was a major reason clearfix techniques became common in older CSS layouts.

Clearfix for Floats

A clearfix forces a parent to contain floated children. The classic modern clearfix uses a pseudo-element after the container.

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

When this class is added to the parent, the pseudo-element clears the floats and makes the parent wrap around them. In modern CSS, display: flow-root can often solve the same problem more cleanly.

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

Float with Images

The best modern use of float is still wrapping text around images or small callouts inside article content. It is simple, readable, and matches the original purpose of float.

.article-image {
  float: left;
  max-width: 40%;
  margin: 0 1.25rem 1rem 0;
}

This allows the image to sit beside text on larger screens. The max-width prevents the image from becoming too wide inside the article. On mobile, this float should usually be removed.

Responsive Float

Floats can create cramped layouts on small screens. A floated image that takes 40 percent of the width may leave too little room for readable text. Use media queries to disable floats on narrow screens.

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

This makes the image return to normal flow on mobile. It becomes full width and the text appears below it instead of squeezing beside it.

Float vs Flexbox and Grid

Float should not be the default tool for modern page layout. Flexbox is better for one-dimensional alignment, such as rows, columns, navigation bars, and button groups. Grid is better for two-dimensional layouts, such as card grids, galleries, and page shells.

Task	Better Tool
Text wrapping around image	Float
Navigation alignment	Flexbox
Card grid	Grid
Equal-height columns	Flexbox or Grid
Legacy layout maintenance	Float knowledge

The problem is not that float is bad. The problem is using float for jobs it was not designed to handle. Modern CSS gives cleaner layout tools for most structural layouts.

Logical Float Values

Modern CSS includes logical float values such as inline-start and inline-end. These follow writing direction instead of fixed left and right sides.

.aside-note {
  float: inline-start;
  margin-inline-end: 1rem;
}

In a left-to-right language, inline-start behaves like left. In a right-to-left language, it behaves like right. Logical values can make layouts more adaptable for multilingual sites.

Float and shape-outside

The shape-outside property can make floated layouts more interesting. Instead of wrapping text around a plain rectangle, text can wrap around a circle, polygon, or image shape. This only works on floated elements, which is one reason float still matters in modern CSS.

.profile-photo {
  float: left;
  width: 180px;
  height: 180px;
  shape-outside: circle(50%);
  clip-path: circle(50%);
  margin: 0 1.5rem 1rem 0;
}

In this example, the image is clipped into a circle and the surrounding paragraph wraps around that circular shape. The float creates the wrapping behavior, while shape-outside changes the wrapping boundary. It is useful for editorial layouts, profile sections, and magazine-style article designs.

Multiple Floats on the Same Line

Multiple floated elements can sit beside each other when there is enough horizontal space. If the available width is not enough, the next floated element drops to the next line. This was once used to create grid layouts, but it requires careful width calculation and clearing.

.tile {
  float: left;
  width: 25%;
}

This creates four floated tiles per row only if padding, borders, and box sizing are handled correctly. If one tile becomes taller than the others, later floats can also wrap in awkward ways. For card grids, CSS Grid is usually cleaner because it was designed for that job.

When Not to Use Float

Avoid float when the goal is centering, equal-height columns, responsive card grids, vertical alignment, or full page layout. Float can force you to add extra clearing code and fragile width calculations. Use float when you actually need inline text to wrap around a visual object. Use flexbox or grid when you need predictable layout structure.

Float and Accessibility

Float changes visual placement but does not change document order. Screen readers and keyboard navigation still follow the HTML order. This is usually fine for floated images and notes, but it can become confusing if float is used to create large layout rearrangements.

For important content, keep the HTML order logical. Use float for visual wrapping, not for changing the reading sequence of a page.

Debugging Float Issues

When float causes layout problems, inspect the parent and the floated element. Check whether the parent has collapsed, whether the next element needs clearing, whether margins are creating enough spacing, and whether a mobile media query should disable the float.

Float and Block Formatting Context

A block formatting context is a layout region that controls how floats interact with nearby content. Properties such as display: flow-root, certain overflow values, and some layout modes can create this kind of boundary. When a parent creates a new formatting context, it can contain internal floats more predictably.

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

This is useful when a component contains a floated image, badge, or small media object. The float remains useful inside the component, but it does not unexpectedly affect content outside the component. This makes float safer in reusable layouts.

For modern CSS, this is the practical mindset: isolate the float, use it for text wrapping, and avoid letting it control the whole page structure.

• Use developer tools to inspect the floated element.
• Check whether the parent contains the float.
• Use clearfix or flow-root when needed.
• Add margin on the side where text wraps.
• Disable floats on narrow screens when text becomes cramped.
• Use flexbox or grid for structural layouts.

Common Float Mistakes

• Using float for modern card grids instead of grid.
• Forgetting to clear floats.
• Not containing floated children inside the parent.
• Leaving floated images active on small mobile screens.
• Using float to change reading order.
• Forgetting margin around floated images.

Float in CSS FAQ

What does float do in CSS?

Float moves an element to the left or right and allows inline content to wrap around it.

Should I use float for page layout?

Usually no. Use flexbox or grid for modern page layout. Float is best for text wrapping around images and legacy layout maintenance.

Why does a parent collapse around floated children?

Floated children do not expand the parent height in normal flow. Use clearfix or display: flow-root to contain them.

How do I remove float on mobile?

Use a media query and set float: none, then adjust width and margins for the smaller screen.

---