Normal Flow
Every block-level element appears on a new line, causing each item to appear lower down the page than the previous one. Even if you specify the width of the boxes and there is space for 2 elements to sit side-by-side, they will continue to simply stack one on top of the other, like boxes in a warehouse. This is the default behavior (unless you tell the browser to do something else through a stylesheet).
Floats
Floating an element allows you to take that element out of the normal flow of the html document and position it to the far left or right of the containing box (whatever element it isĀ insideĀ of). The floated element becomes a block-level element around which other content can flow. That means anything else that sits inside the containing element will flow around the floated element unless you tell those items to float as well.
When you use the float property on an element that does not already have a fixed width, you should use the width property to indicate how wide the floated element should be. If you do not, results can be inconsistent.
