Home > Web Front-end > CSS Tutorial > Why Do Floated Elements Cause Text to Wrap Instead of Shifting Down?

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

Mary-Kate Olsen
Release: 2024-10-31 19:45:02
Original
912 people have browsed it

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>
Copy after login
<code class="html"><div class="float"></div>
<div class="blue"></div></code>
Copy after login

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!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template