The float property makes a block-level element float on its container's left or right side, while text and inline elements wrap around it. You must have seen such alignment in print layouts where photos and other graphic elements are aligned to one side while the text flows naturally around them. The property seems like no sweat. But what if there are several floated elements with the same alignment type — for example, float: left;?

Instead of stacking on top of each other like elements of the normal flow, the next element sticks to the left of the previous block until there's room. Then, they would wrap to the next line. It makes the float property a perfect tool for creating traditional multicolumn layouts.