Float & Clear
HC · Layout & Positioningsyntax
float: left | right | none;
clear: left | right | both;example
/* Classic text wrapping around an image */
.article-image {
float: left;
margin: 0 16px 16px 0;
max-width: 40%;
}
/* Clear floats */
.clearfix::after {
content: "";
display: table;
clear: both;
}Note Floats were once used for page layouts but flexbox and grid have replaced that use case. Floats are still useful for wrapping text around images. Use the clearfix hack or display: flow-root on the parent to contain floated children.