CSS 中的 float 屬性用于水平定位元素，允許其他內(nèi)容圍繞它排列，最初設(shè)計(jì)用于類似雜志圖文排版的場景。1. 它將元素從文檔流中移除并推向左側(cè)或右側(cè)，影響后續(xù)元素布局；2. 常用于圖像庫、文本環(huán)繞圖像及舊式多列布局；3. 父容器會因浮動元素而塌陷，需使用 clear 屬性或 clearfix 技術(shù)清除浮動；4. 雖被 Flexbox 和 Grid 取代，但理解其機(jī)制仍對維護(hù)舊項(xiàng)目至關(guān)重要。

The float property in CSS is used to position elements horizontally, allowing other content (like text or inline elements) to wrap around them. It was originally designed for print layout, like having images with text flowing around them in a magazine. While modern layout techniques like Flexbox and Grid have largely replaced float, it's still important to understand how it works—especially when maintaining older sites.

How Floats Affect Layout

When you apply float: left or float: right to an element, it gets taken out of the normal document flow and pushed to the specified side. Other content will then try to flow around it.

For example:

• If you float an image to the left, text next to it will start from the right of the image and continue below it once there’s no more space.
• Elements after the floated item might shift up to fill the space it left behind.

One key thing to note: floated elements only affect elements that come after them in the HTML, unless cleared explicitly.

Here’s what happens visually:

• The floated box moves as far left/right as possible within its container.
• Inline content wraps around it.
• Block-level elements ignore the floated box and take up full width unless told otherwise.

This behavior can lead to unexpected layouts if not managed carefully.

Common Use Cases for Float

Floats were once the go-to method for creating multi-column layouts before Flexbox and Grid came along. Here are some typical scenarios where floats were used:

• Image galleries: Floating images side by side to create a grid-like appearance.
• Text wrapping around images: Like in blog posts or articles.
• Basic layout systems: Before CSS Grid, developers built entire page structures using floated <div> elements.<p>While these use cases are now better handled with modern tools, you may still encounter float-based layouts in legacy codebases.</p> <p>A common pattern looked like this:</p><pre class='brush:php;toolbar:false;'>.column { float: left; width: 33.33%; }</pre><p>This would create a simple three-column layout.</p><h3 id="Clearing-Floats-and-Avoiding-Issues">Clearing Floats and Avoiding Issues</h3><p>Since floated elements are removed from the normal flow, their parent containers often collapse—they end up with zero height because they don’t “see” the floated children.</p><p>To fix this, we use the <code>clear property:
  • clear: left means the element won't allow any floated elements on its left.
  • clear: right does the same for the right side.
  • clear: both prevents floats on either side.

  Another common technique is using a clearfix hack, which adds invisible content at the end of the container to force it to contain the floated items.

  Here’s a basic version of the clearfix:

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

  Also, keep in mind:

  • Floats can cause overlapping issues if there isn’t enough horizontal space.
  • They can be tricky to center directly using just float.
  • Always remember to clear floats when needed, especially in long pages with multiple sections.

  基本上就這些。 Float 是早期布局的重要工具，理解它有助于調(diào)試?yán)享?xiàng)目，但做新項(xiàng)目時可以優(yōu)先考慮 Flexbox 或 Grid。