1
HTML/CSSAdvanced#css#float
HTML/CSSIntermediate#css#float#layout
What is the CSS float property used for and what problems does it cause?
float was originally designed to wrap text around images, and later hijacked for layout before flexbox/grid existed. Floated elements are removed from normal flow, causing parent containers to collapse (zero height) unless cleared, requiring hacks like clearfix.
Example
.clearfix::after {
content: "";
display: table;
clear: both;
}
img { float: left; margin-right: 10px; }