Old School Layouts: The CSS Float Property
Discover how to wrap text around elements with the float property and learn the critical importance of `clear` to manage your layouts.
What is Float?
The float property was originally created to allow text to wrap around images, much like in a newspaper. It takes an element out of the normal document flow and shifts it as far as possible to the left or right within its container.
Float Values: Left & Right
The three main values are left, right, and none (the default). Applying float: left; to an element will make it float to the left, and subsequent inline content will wrap around its right side.
The 'Clear' Property & The Clearfix
A common issue is that the container of floated elements collapses in height. To fix this, we use the clear property on a subsequent element or a "clearfix" technique. clear: both; ensures an element appears below any floated elements above it.
Legacy Tool vs. Modern Layouts
While crucial to know (you'll see it in older codebases), float is no longer the standard for creating page layouts. Modern CSS offers more powerful and predictable tools like Flexbox and Grid, which are designed specifically for complex layout tasks.
Practice Zone
Interactive Test 1: Drag & Drop
Arrastra en el orden correspondiente.
Arrastra las opciones:
Completa el código:
Interactive Test 2: Fill in the Blanks
Rellena los huecos en cada casilla.
.image-left { : left; } .footer { : both; }
Practice Example: Code Editor
In the editor below, make the image `div` with the class `profile-pic` float to the left so the text wraps around it.
Float Selectors
| Selector | Description |
|---|---|
| .float-left | Applies 'float: left;' to the element. |
| .float-right | Applies 'float: right;' to the element. |
| .clear-both | Removes the float effect from the element. |
| .container | Container that uses float to organize elements. |
| .box | Element that aligns to the left or right side. |
* Write your CSS code and apply it to see the results.
Results:
Practical Guide to Using CSS Float
Float is a fundamental layout concept. While modern tools have largely replaced it for page structure, understanding it is key to working with older websites and certain layout patterns.
1. Classic Use Case: Wrapping Text Around an Image
This is the original purpose of `float`. By floating an image to the left or right, you can create a professional, magazine-style layout where text flows naturally around the visual element.
.profile-pic {
float: left;
margin-right: 15px;
margin-bottom: 5px;
}Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat.
2. The Collapsing Parent Problem
When a parent element only contains floated children, its height collapses to zero because the floated elements are removed from the normal document flow. This can break your layout completely.
/* This container will have no height! */
.container {
border: 2px dashed red;
}
.container .box {
float: left;
width: 100px;
height: 100px;
}3. The Solution: The "Clearfix" Hack
The modern solution is the "clearfix" hack. By adding a pseudo-element (`::after`) to the container, we can use `clear: both` to force the container to expand and properly wrap its floated children.
.container::after {
content: "";
display: block;
clear: both;
}Practical Takeaway: Understand `float` for maintenance, but for new projects, reach for Flexbox or Grid first. They provide a more robust and intuitive system for building modern, responsive layouts without the need for hacks like the clearfix.