CSS中clear属性使用困惑：求经验式详解及配套图示

Hey there! I totally get how confusing the clear property can be at first—floating elements already feel like they're breaking the normal document flow, and clear feels like this weird magic wand to fix the mess they leave behind. Let me break this down step by step with concrete examples and visual explanations (I'll describe the "diagrams" since I can't embed images directly, but they'll make perfect sense!).

First, let's recap why we even need clear. When you float an element (say float: left), it's pulled out of the normal top-to-bottom, left-to-right flow of the page. That causes two common headaches:

• The parent element won't stretch to contain the floated element (so the parent's height collapses to 0 if it has no other non-floated content)
• Any elements that come after the floated element will wrap around it—great for text wrapping around images, but terrible when you want a new section to start below all floated content.

Here's a quick example of that problem:

<div class="parent">
  <div class="float-box">I'm floated left!</div>
</div>
<p>Text that comes after the parent</p>

.float-box {
  float: left;
  width: 200px;
  height: 200px;
  background: lightblue;
}
.parent {
  border: 2px solid black;
}

What this looks like: The parent div is just a thin black border (since it collapsed), and the <p> text wraps around the right side of the blue floated box instead of starting below it.

The clear property tells an element: "Don't let any floated elements sit next to me on [left/right/both] sides. Instead, move me down below all floated elements on that side."

Let's break down each value with real scenarios:

1. clear: left #

This means the element will move below any elements floated to the left. Right-floated elements can still sit next to it on the right.

Example:

<div class="float-left">Float Left 1</div>
<div class="float-left">Float Left 2</div>
<div class="clear-left">I clear left floats!</div>

.float-left {
  float: left;
  width: 150px;
  height: 150px;
  background: lightgreen;
  margin: 0 10px 10px 0;
}
.clear-left {
  clear: left;
  background: pink;
  padding: 10px;
}

Visual description: The two green boxes sit side by side on the left. The pink div doesn't wrap around them—it drops down below both left floats, starting a full-width line with no left-floated elements next to it.

2. clear: right #

Opposite of left—the element moves below any right-floated elements. Left floats can still be on its left side.

Example:

<div class="float-right">Float Right 1</div>
<div class="float-right">Float Right 2</div>
<div class="clear-right">I clear right floats!</div>

.float-right {
  float: right;
  width: 150px;
  height: 150px;
  background: lightgreen;
  margin: 0 0 10px 10px;
}
.clear-right {
  clear: right;
  background: pink;
  padding: 10px;
}

Visual description: The two green boxes are side by side on the right. The pink div drops below both right floats, starting on the left with no right-floated elements next to it.

3. clear: both #

This is the most commonly used value—it tells the element to move below all floated elements, whether left or right. Use this when you want a clean break after any floating content.

Let's fix our earlier parent collapse example with clear: both using a classic "clearfix" trick (before flexbox/grid made this easier):

<div class="parent">
  <div class="float-box">I'm floated left!</div>
  <div class="clearfix"></div> <!-- Empty div to clear the float -->
</div>
<p>Text that comes after the parent</p>

.clearfix {
  clear: both;
}

Visual description: Now the parent div stretches to contain the blue floated box (because the clearfix div is a non-floated element that sits below the float, pushing the parent's height down). The <p> text starts below the parent, no longer wrapping around the float.

For a cleaner solution (no extra HTML), use the modern pseudo-element clearfix:

.parent::after {
  content: "";
  display: block;
  clear: both;
}

This adds an invisible block element after the parent's content that clears both floats, forcing the parent to wrap around all its floated children.

4. clear: none #

This is the default value—it means the element doesn't clear any floats, so it will wrap around floated elements as normal (like the <p> in our first problem example).

• Fixing parent container collapse: As we saw, clearfix with clear: both ensures parent elements contain their floated children.
• Creating new sections: If you have a row of floated product cards, add clear: both to the footer or next section so it doesn't sit next to the cards.
• Stopping text wrapping: If you have an image floated left but want a paragraph below it instead of wrapping around, apply clear: left to the paragraph.

Think of the page as a series of horizontal rows:

• Normal flow elements stack in these rows, full width.
• Floated elements "jump up" to the nearest available space in the row above, sticking to left/right.
• clear tells an element: "I'm not joining that crowded row—move me to a new row where there are no floats on [left/right/both] sides."

I hope this clears up the confusion! The key thing to remember is: clear affects the element it's applied to, not the floated elements themselves. It's a way to tell this element to avoid sitting next to floats and start fresh below them.

内容的提问来源于stack exchange，提问作者itsolidude