Alignment

This tutorial discusses float, clear, and other alignment techniques.

To center an element horizontally in its parent container, use margin: * auto to set left and right margins to auto.

Floating:

The float CSS property places an element on the left or right side of its container, allowing text and inline elements to wrap around it. The same effect can be achieved by using position: absolute however, the element is removed from the normal flow of the page (floated to left or right), though still remaining a part of the flow in the sense that flow is continued after the element. Absolute positioning takes the element out of the normal document flow. Any absolutely positioned element is completely ignored when regarding normal elements.

There is however, a problem. Since the float takes the elements out of the flow, there is no need for the container to fit them inside it. Therefore, the floated element overflow outside and the container only fits to fit the non-floated content. To get over this, use overflow: hidden; (less hacky but still isn't the proper way) or place an empty element after the floated elements with the clear property set (the infamous clearfix hack).

There is now a proper method to solve this problem. Use: display: flow-root;

Clear:

The clear CSS property allows an element to not be interfered with by other float elements around it

You can chose to clear the element of specific floated elements: clear: both;, clear: left, clear: right;

Alas, the misuse of float has forced it to change from mearly a convenience to wrap text around an image, to designing web layouts. And although flexbox has come to the rescue, will it be any good?