UX Design and Development course

What is "Float"?

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.

Floats and computed height

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.

Floated elements are block level

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

JS Bin

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.

Floats and computed height

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.

Floated elements are block level

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.