What is the difference between Float:left vs Display:inline? While every element in browser goes to left by default

Question

What is the differences between Float vs Display:inline? by default everything goes to left side in every browser. then 2 display inlined elements should be worked same like float:left.

http://www.w3schools.com/css/tryit.asp?filename=trycss_display_inline

Answer 1

display:inline means a element is will "stack" next to other items, like images, spans or the bold tag. This is opposed by block level elements (display:block) which take up horizontal space, imply a line break, and will not sit next to one another, like divs, paragraphs, or tables.

Think of it this way...

<img /><img /><img />  <div /> <div /> <div /> 

float is a different notion altogether, moving content either left or right. By default, a floated element is inline, and floated elements will stack up next to one another.

All of these types of elements are part of the normal document flow, meaning they take up "space" in the design that cannot be shared.

Answer 2

There are two types of formatting: block level and inline. The block level formatting is done with a box model that uses a set of rules for layout.

Inline formatting is what text normally gets. It means, informally, that things are filled into lines.

At times, you want to change the default formatting an item will get. Something that normally might be block level formatted you might want to have treated as inline. A div containing content such as graphic of a key, for example, might need to be displayed within a sentence. One might then override its formatting with display:inline. Images are already displayed "Inline"

The CSS specification has a surprisingly simple definition for floats:

A float is a box that is shifted to the left or right on the current line. The most interesting characteristic of a float (or "floated" or "floating" box) is that content may flow along its side

So a float is a sort of third category of formatting model. It relates to inline as being, informally put, a layout model.