{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 来，给爷笑一个 的问题《What is the difference between Float:left vs Displ》','https://www.manongdao.com/q-1176041.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
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
display:inlinemeans 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...
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.
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:
So a float is a sort of third category of formatting model. It relates to inline as being, informally put, a layout model.
Every browser has a "flow". The flow sort of emulates a word processor in that elements flow from left to right, top to bottom. Elements that do not fit at the end of a "line", wrap to the next "line", so to speak.
Block elements take up the full line. Inline elements only take up as much space as they need, so other elements can sit next to them on the same line. Unless there is a width declared, that doesn't happen with block elements.
Floating an element takes the elements out of the normal flow and shifts it to the left/right. The space that the object occupied before it was floated is empty, and collapses. If I float two elements that take up more space than the line can hold, one may fall to the next "line".
@Jitendra - displaying two spans inline will put them together in the flow, yes. Floating two elements that do not take up the space of the full line will appear to do the same thing. They definitely have different uses, though.
If I wanted to have text flow around an image in a paragraph, I would float the image not use
display:inline. If I wanted to create a horizontal menu from list item elements, I would usedisplay:inline, notfloat.Go to w3schools and try this in their editor (because the image links are entirely theirs, or you can replace the image src from your image source urls) Then resize the windows.
What you will notice is.. That in case of display:inline, the text will split into words and some words of the text will appear in the next line. Though in the case of float:left the whole text will be displayed together as an element and will not split.
The purpose of inline is just to display everything in a LINE, though the purpose of float is to arrange ELEMENTS aligning to some dimension.
Although it's too late to answer, but one of the major differences that I can mentioned here is about:
ClearIn
floatelements you shouldClearyour floats but ininlineelements no clearing is required.You can see a live example here: http://jsfiddle.net/K9PXF/
And this a great article about floats and clearing: http://css-tricks.com/all-about-floats/
display: inlinemeans that the element acts like a<span>instead of a<div>: i.e. it is not a block.Elements that are floated are not in the normal flow of the document. Here is a good description.
ETA:
Try this code. If you can't see the difference then I can't help you.