css floating

THE RULES OF FLOATS

float: left | right | inherit | none

1 - a floated element is “invisible” to its parent
2 - a left/right floated element will try to be as close to the top and left/right of its parent element as possible
3 - previously defined elements will push a floated element down
4 - a previously declared floated element will be given a more preferable position
5 - a position closer to the top of the parent element is preferred to a position closer to the left/right of the parent element
6 - a floated element should not extend outside its parent element
7 - clear/clearfix - the clearing element’s top edge must be below any left floated elements’s bottom edge

Hats off to this blog author for clear explanation and basic review
http://bitsofco.de/2015/how-floating-works/