Float is a CSS positioning property. To understand its purpose and origin, we can look to print design. In a print layout, images may be set into the page such that text wraps around them as needed. This is commonly and appropriately called "text wrap". Here is an example of that.
A parent element that has only floated content will have a computed height: 0;. Add a clearfix to the parent to force browsers to compute a height.
Elements with a float will automatically become display: block;. Do not set both as there is no need and the float will override your display.
.element { float: left; display: block; / Not necessary / }
Read: All About Floats
Play: Demo
Pro-tip: In IE6 we had to set display: inline; for most floats to work properly and avoid the double margin bug. Hopefully, those days have long passed.
A parent element that has only floated content will have a computed height: 0;. Add a clearfix to the parent to force browsers to compute a height.
Elements with a float will automatically become display: block;. Do not set both as there is no need and the float will override your display.
.element {
float: left;
display: block; /* Not necessary */
}
Fun fact: Years ago, we had to set display: inline; for most floats to work properly in IE6 to avoid the double margin bug. However, those days have long passed.