Clear in CSS

Clear in CSS controls whether an element is allowed to sit beside floated elements. It is directly connected to the float property. When an earlier element is floated left or right, following content may wrap around it. The clear property tells an element to move below floated elements instead of sitting beside them.

Clear is mostly used in float-based layouts and legacy CSS. Modern layouts usually use flexbox and grid, but clear is still important because float is still used for article images, older themes, and existing websites. If you work with WordPress themes or older code, you will eventually see clear and clearfix patterns.

Basic Clear Syntax

The clear property can use values such as none, left, right, and both. Logical values also exist, but left, right, and both are the most common.

.next-section {
  clear: both;
}

This rule means the next section should not sit beside left or right floated elements. It moves below them.

Why Clear Is Needed

When an element is floated, following inline content can wrap around it. Sometimes this is desired. For example, paragraph text wrapping around an image is useful. But sometimes the next block should start below the float, not beside it.

.image {
  float: left;
  width: 200px;
}

.after-image {
  clear: left;
}

The .after-image element moves below left floats. Without clear, it may appear beside the image if there is horizontal space.

clear: left

The value left prevents an element from sitting beside a left-floated element. The element moves down until its top edge is below the left float.

.content-break {
  clear: left;
}

Use this when only left floats need to be cleared. It is less common than clear: both, but it gives more specific control.

clear: right

The value right prevents an element from sitting beside a right-floated element.

.content-break {
  clear: right;
}

This is useful if your layout uses right-floated images, notes, or side boxes and the next block should start below them.

clear: both

The value both clears both left and right floats. It is the safest and most common clearing value because it does not require knowing which side was floated.

.footer {
  clear: both;
}

In older float-based layouts, footers often used clear: both so they would appear below floated columns instead of sliding up beside them.

clear: none

The default value is none. It means the element does not clear floats and may sit beside floated content if the layout allows it.

.normal-block {
  clear: none;
}

This value is useful when overriding a clearing rule from another stylesheet.

Clear and Block Formatting

Clear works on block-level elements. It forces the top border edge of the clearing element below relevant floats. It does not remove the float. It only controls where the clearing element starts.

This distinction matters. If a floated image is causing text to wrap, adding clear to the image itself is not the usual fix. Add clear to the element that should appear after the floated content.

Clear Does Not Clear the Parent Automatically

One common misunderstanding is thinking that clear on a following element fixes every float problem. Clear can move that following element below floats, but it does not automatically make the parent container calculate height from floated children.

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

.next-section {
  clear: both;
}

The next section moves below the floated cards, but the parent of the cards may still collapse if it contains only floated children. For that parent problem, use clearfix or display: flow-root. This difference is important when debugging old float-based layouts.

Clearfix Pattern

The clearfix pattern is used to make a parent contain floated children. Without it, a parent with only floated children may collapse because floats do not contribute to parent height normally.

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

The pseudo-element is inserted after the floated children and clears them. This makes the parent wrap around the floats. This pattern appears in many older CSS frameworks and themes.

Modern Alternative: flow-root

Modern CSS can often replace clearfix with display: flow-root. It creates a new block formatting context, which contains floats cleanly.

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

This is shorter and easier to understand than a clearfix pseudo-element. However, clearfix may still appear in older codebases, so both patterns are worth knowing.

Clear Utility Classes

Older CSS projects often used utility classes for clearing. A class like .clear or .clear-both was added in HTML after floated columns. This worked, but it mixed layout repair into the markup and added extra empty elements.

.clear-both {
  clear: both;
}

This style is easy to understand, but the clearfix pseudo-element or flow-root is usually cleaner because the HTML does not need an empty clearing element. Still, utility classes are common in legacy themes, so you should recognize what they are doing.

Clear vs Overflow Hidden

Another older technique for containing floats is applying overflow: hidden to the parent. This can contain floats because it creates a new formatting context. But it can also clip shadows, dropdowns, focus rings, or content that should remain visible.

.container {
  overflow: hidden;
}

This approach should be used carefully. For float containment, display: flow-root is usually clearer when browser support is acceptable.

Clear in Article Layouts

Clear can be useful in article content where images are floated. For example, after a section with a floated image, the next heading may need to begin below the image instead of wrapping beside it.

.article h2 {
  clear: both;
}

This forces headings to start below any previous floats. It can improve article readability when floated images are used in long content.

Clearing Headings and Sections

In real article pages, a floated image may continue beside the next heading if the image is tall. That can look broken because a new section heading appears squeezed beside an old image. Applying clear to headings or major sections prevents this visual collision.

.post-content h2,
.post-content section {
  clear: both;
}

Use this carefully. Clearing every heading may create large vertical gaps if the float is tall. The best rule depends on the article design. In content-heavy WordPress sites, it is often better to clear headings than to let section titles wrap beside old floated media.

Clear and Responsive Design

If floats are disabled on mobile, clear rules may become unnecessary, but they usually do not cause major problems. Still, responsive CSS should be reviewed so old float and clear rules are not fighting the mobile layout.

@media (max-width: 700px) {
  .article-image {
    float: none;
  }

  .article h2 {
    clear: none;
  }
}

This removes both the float and the clear behavior on small screens. The content returns to normal vertical flow.

Clear and Modern Layout

Clear is not used with flexbox and grid in the same way it is used with floats. If a layout uses flex or grid, spacing and placement should usually be handled with flex or grid properties, not clear.

Layout Situation	Recommended Tool
Element after floated image	clear
Parent containing floated children	clearfix or flow-root
Card grid layout	CSS Grid
Navigation row	Flexbox
Equal columns	Flexbox or Grid

Debugging Clear Problems

If clear is not working, confirm that there is actually a floated element before the clearing element. Also confirm that the clearing element is in the correct place in the HTML. Clear affects the element it is applied to; it does not reach backward and change the floated element.

Use browser developer tools to inspect the floated element, the clearing element, and the parent. Check computed styles for float, clear, display, and overflow-related properties.

How to Choose the Clear Value

Choose the clear value based on which floats should be avoided. If the previous element is floated left, clear: left is enough. If it is floated right, clear: right is enough. If the layout may contain floats on either side, clear: both is usually safer.

Need	Clear Value
Avoid only left floats	clear: left
Avoid only right floats	clear: right
Avoid both sides	clear: both
Allow wrapping beside floats	clear: none

In real projects, clear: both is common because components and article content can change over time. A page that only uses left floats today may use right floats later. Clearing both sides prevents unexpected wrapping when content is edited.

For reusable CSS, avoid adding clear randomly. Add it where the reading flow truly needs to restart below floated content, such as a footer, a new article section, or an element that should visually separate itself from the floated media above it.

In content management systems, this matters because editors may insert images, callouts, and headings in different combinations. A small clear rule on section headings can protect readability, while a parent-level float containment rule can protect the layout box itself.

So treat clear as a flow-control tool, not as a replacement for a real layout system.

When the layout problem is alignment, sizing, or distribution, choose flexbox or grid instead of adding more clear rules.

Common Clear Mistakes

• Using clear when no floated element exists.
• Applying clear to the floated element instead of the following element.
• Using clear to fix flexbox or grid layout problems.
• Forgetting clearfix or flow-root on a parent with floated children.
• Leaving desktop float and clear rules active on cramped mobile layouts.
• Using overflow hidden for clearfix and accidentally clipping content.

Clear in CSS FAQ

What does clear do in CSS?

The clear property prevents an element from sitting beside floated elements on the selected side.

What is clear both?

clear: both moves the element below both left and right floated elements.

Is clear still used in modern CSS?

Yes, but mostly with floats and legacy layouts. Flexbox and grid usually do not need clear.

What is clearfix?

Clearfix is a pattern that uses a clearing pseudo-element so a parent contains floated children.

---