Why Do Floated Elements Cause Text to Wrap Instead of Shifting Down?

Why Does Text Wrap Around Floating Elements Instead of Moving Beneath Them?

When floating a div, it may appear counterintuitive that text will wrap around it instead of shifting below it like other elements. Understanding the mechanics of float behavior is crucial for achieving the desired layout.

Float Property Explanation

According to the CSS documentation, the float property:

"Places an element on the left or right side of its container, allowing text and inline elements to wrap around it. The element is removed from the normal flow of the page, though still remaining a part of the flow."

Key Features of Floated Elements

Two important aspects of floated elements to consider:

• Removed from Normal Flow: Allows other elements to overlap or be overlapped by the floated element.
• Text Wrapping: Only text and inline-level elements will wrap around the floated element.

Example

In the below code, the red div is floated left, causing the blue div to wrap around it.

<code class="css">.float {
  width: 100px;
  height: 100px;
  background: red;
  float: left;
}

.blue {
  width: 200px;
  height: 200px;
  background: blue;
}</code>

<code class="html"><div class="float"></div>
<div class="blue"></div></code>

The above is the detailed content of Why Do Floated Elements Cause Text to Wrap Instead of Shifting Down?. For more information, please follow other related articles on the PHP Chinese website!