Definition
CSS Float is a layout property (float: left/right) that shifts an element to one side, removing it from normal flow and allowing text to wrap around it.
Why It Matters
Floats are the classic layout method for wrapping text around images. Although modern grid/flex systems are preferred for page layouts, floats remain the only way to wrap text around an element.
Core Concepts
float: left/right: Moves elements to the side. Content flows around the floated element.clear: Restores normal flow below floated elements (clear: left/right/both).- Clearfix: Container collapse fix using
.container::after { content: ""; display: block; clear: both; }. shape-outside: Allows wrapping text in non-rectangular shapes around floated elements.
.thumbnail {
float: left;
margin-right: 15px;
}
.container::after {
content: "";
display: block;
clear: both; /* Clearfix to prevent container collapse */
}