Basics of CSS Float

          In the CSS layout model, text elements are laid out from top to bottom in the order in which they appear in the source, and from left to right (in left-to-right reading languages). Block elements stack up on top of one another and fill the available width of the browser window or other containing element. Inline elements and text characters line up next to one another to fill the block elements.

          When the window or containing element is resized, the block elements expand or contract to the new width, and the inline content reflows to fit.

          Blocks are laid out in the order in which they appear in the source. Each block starts on a new line.

          Objects in the normal flow affect the layout of the objects around them. This is the behavior you’ve come to expect in web pages, elements don’t overlap or bunch up. They make room for another one.

          Floating and positioning change the relationship of elements to the normal flow in different ways. Let us first look at the special behavior of floated elements (or “floats” for short)