Why Does Text Wrap Around Floated Elements?

Text Wrapping Anomaly: Why Does Text Flow Around Floats?

When positioning elements on a web page, the default behavior of HTML elements is to flow from top to bottom, as specified in the normal document flow. However, when the float property is applied to an element, this behavior changes.

Floating Elements: Breaking the Flow

Float places an element on the left or right side of its container, causing text and inline elements to wrap around it. This is because the floated element is removed from the normal flow of the page, meaning that other elements can overlap or be overlapped by it, similar to elements positioned absolutely.

Text and Inline Elements: The Only Exceptions

While all other elements are affected by the position of a floated element, text and inline elements are the exception. They continue to wrap around the floated element, avoiding overlap.

Understanding Float Properties

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.

Based on these properties, we can conclude that:

• Removed from normal flow: Floated elements can overlap or be overlapped by other elements in the normal flow.
• Wrapping exception for text and inline elements: These elements will always wrap around floated elements, regardless of their position.

Example in Action

Consider the following HTML and CSS code:

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

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

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

In this example, the red div with the class "float" will be positioned on the left side, while the blue div with the class "blue" will be positioned below it. However, any text that appears between the red and blue divs will wrap around the red div, maintaining the integrity of the text flow.

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