CSS的float屬性用于將元素向左或向右浮動，使其他內(nèi)容（如文本）可以環(huán)繞它；當所有子元素都浮動時，容器可能會塌陷，因此需要清除浮動。具體方法包括使用clearfix、overflow屬性或添加清除元素；現(xiàn)代布局中Flexbox和Grid已取代float，但其在文本環(huán)繞圖片等場景仍適用。

The float property in CSS is used to position elements to the left or right of their container, allowing other content (like text) to wrap around them. It was originally designed for layout purposes, like placing images with text flowing around them. However, using float can lead to unexpected layout behavior if you don’t properly manage how elements interact. That’s where clearing floats comes in.

What does float do exactly?

When you apply float: left or float: right to an element, it takes that element out of the normal document flow and pushes it to the specified side. Other content, like paragraphs or headings, will then flow around it.

For example:

img {
  float: left;
  margin-right: 10px;
}

This would let text wrap around the image on the right side. If you don't set a width on the floated element, it might take up more space than expected, pushing other content further down.

Here’s what you should know:

• Floated elements are block-level by default, even if they’re inline elements like <span>.
• Multiple floated elements will line up next to each other as long as there’s space.
• If there’s not enough horizontal space, they’ll "drop" down to the next line.

Why clearing floats is important

When all child elements inside a container are floated, the container may collapse — meaning it ends up with zero height because the floated elements are no longer part of the normal flow. This can break your layout.

To fix that, you need to clear the floats so the container wraps around its floated children.

Common ways to do this include:

• Using a clearfix (a popular method):

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

  Then apply class="clearfix" to the container element.

• Using overflow (a quick and easy trick):

  .container {
    overflow: hidden; /* or auto */
  }

  This forces the container to expand around floated children.

• Adding a clearing element (older method, not recommended):

  <div style="clear: both;"></div>

  Place this after all floated elements inside the container.

  Each method has its pros and cons:

  • overflow: hidden is quick but might hide content if it overflows.
  • The clearfix method is more flexible and widely used.
  • Adding a <div> just to clear is outdated and not semantic.<hr> <h3 id="When-and-where-to-use-float-today">When and where to use float today</h3> <p>While modern layout techniques like Flexbox and CSS Grid have largely replaced <code>float for layout purposes, float is still useful in specific cases — like wrapping text around images or creating simple multi-column layouts in older projects.

    If you're working on a legacy codebase or need a quick inline layout, float can still be handy. Just remember to clear it when needed.

    ---

    A few float-related gotchas

    • Floats can cause unexpected spacing — especially when combined with inline elements or whitespace in HTML.
    • Nested floats can behave differently depending on parent widths.
    • Older browsers (like IE) have quirky float behavior, which is less of a concern these days but worth noting if you support older systems.

    ---

    Clearing floats isn’t complicated, but it’s easy to forget — especially if your layout looks fine at first glance. Keep a clearfix ready or use overflow when needed, and you’ll avoid most float-related layout issues.

    基本上就這些。