Why Does Text Wrap Around Floating Elements in CSS?

Floating Elements and Text Wrapping

While navigating the intricacies of CSS, you may have encountered a puzzling observation. Dividing elements with the float property allows other elements to flow below them. However, text behaves differently, wrapping around the floating element instead of descending beneath it.

Understanding Float

This behavior is fundamental to the way the float property operates. According to the CSS documentation:

"The float CSS 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."

Characteristics of Floating Elements

Floated elements have two key characteristics:

1. Removed from normal flow: Other elements can overlap the floating element or vice versa, similar to elements with absolute positioning.
2. Text and inline elements wrap around: Only text and inline-level elements will avoid overlapping floating elements and instead wrap around them.

Basic Examples for Clarification

Consider these examples:

<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>

In this arrangement, the blue div will wrap around the floating red div because it is a text-level element.

The above is the detailed content of Why Does Text Wrap Around Floating Elements in CSS?. For more information, please follow other related articles on the PHP Chinese website!