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