The float property is used for positioning and layout on web pages. It was originally designed to allow text to wrap around images, but later became a popular way to create two and three-column layouts.
Elements can be floated left or right. A floated element is pushed to the side of its container, allowing content below it to wrap around it.
This paragraph is wrapping around the box that is floated to the left. As you can see, the text flows around the right side of the box. Before modern CSS Flexbox and Grid, this was the primary way developers organized website layouts into columns.
.box {
float: left;
width: 100px;
margin: 10px;
}Content following floating elements will wrap around them. If you want an element to start on a new line, you must use the clear property.
clear: left; — The element is pushed below any left-floated elements.clear: right; — The element is pushed below any right-floated elements.clear: both; — The element is pushed below all floated elements..footer {
clear: both;
}If a floated element is taller than its container, it will "overflow" outside of it. To fix this, we apply a "clearfix" to the parent container.
/* Standard Clearfix */
.parent::after {
content: "";
clear: both;
display: table;
}float is still important for text-wrapping, modern layout systems like **Flexbox** and **CSS Grid** have largely replaced floats for creating page structures.