default positioning question on html elements?

i created two divs first a red background div and then a blue background div both having a width height 100px. Blue div appears below red div. However if i apply a float left or display inline.Blue div appears next to red div. I want to understand how elements are placed on a html page what does 开发者_JS百科applying float or display inline makes a difference to it.

See The Visual Formatting Model in the CSS specification.

Divs are "block" elements which means they have a line break before and after them, making new element appear below them.

If you set display to "inline" then they become inline elements removing the line breaks so new elements appear next to them.

Floating left makes an element "float" on to the left of the page (or containing element), content then flows around the right side of the element from the top of the element (it was designed to replace the "align" attributes for images).