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 lik

Answer 1

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.