What is the difference between Float:left vs Displ

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

The normal workflow of a browser is to display the elements from the left to the right, each near the other (if inline elements) ... when a line ends because of the size of the web page, the browser starts again to display the elements from the left to the right but on the next line.

A "float" directive, on an element, forces the browser to display the element out of the normal workflow, on the top-left or the top-right side of the webpage.

The "display inline" directive forces the block elements to be displayed inline, so the browser manage these elements as explain above!

IN RESPONSE TO YOUR QUESTION: No! As I've written: the float:left force any element (block or not block), placed on any line of a web page, to be floated on the left side of the web page ... even if the text aligning is set to "right"! If the text align is set to left, applying a float:left seams that nothing happens ... instead even in that case the element is forced to go out of the normal workflow of the browser, in fact, usually, the margin left is reseted!

The display:inline doesn't affects the inline elements ... if the text align (of the elements' container) is set to "right", a display:inline doesn't float it on the left (notice, I'm referring to inline elements)... because the "display:inline" says to the browser only to display an element in the same line of the normal workflow ... so, if an element is inline (for example a link element), this property doesn't change its behavior!

So, the "display:inline" affects only the "block" elements! But even in this case, it doesn't float left the block element, but it force the element only to be displayed in the same line of the other inline elements!

ABOUT YOUR EXAMPLE: The div(s) are block elements, the normal workflow is not inline ... so the browser, by default, shows them one below the other, like in this example:

<div class="purple" style="float:left">Link one</div> 
<div class="purple">Link two</div> 
<div class="purple">Link three</div> 
<div class="purple">Link four</div>

even if you apply a float:left to the first div, seams that nothing happens only why it is already on the top-left corner ... where should it go otherwise!!!???

The second example ...

<div class="red" style="float:left">Link one</div> 
<div class="red" style="float:left">Link two</div> 
<div class="red" style="float:left">Link three</div> 
<div class="red" style="float:left">Link four</div> 

When you apply a float:left to adjacent div(s), force the browser to display them out of the normal workflow (As I sad, block elements appears, by default, one below each other!), floating the div(s) on the left side ... in this case one near each other. Notice that as I sad the margin are reseted ... because the div(s) are not on a ordinary line of the browser, but are only floated on the left ... again, out of the normal workflow!

In fact, the next example confirm what I sad in theory ... the display:inline force the browser to display block elements (div) on the same line respecting their default margin and padding:

<div class="brown" style="display:inline">Link one</div> 
<div class="brown" style="display:inline">Link two</div> 
<div class="brown" style="display:inline">Link three</div> 

But the display:inline doesn't force elements to float on the left but only to be managed as inline elements, to clarify this concept look at the big difference between the two example below!

FIRST:

<div style="width:800px; text-align: right;">
    <div class="brown" style="display:inline">Link one</div> 
    <div class="brown" style="display:inline">Link two</div> 
    <div class="brown" style="display:inline">Link three</div> 
    <div class="brown" style="display:inline">Link four</div> 
</div>

SECOND:

<div style="width:800px; text-align: right;">
    <div class="brown" style="float:left">Link one</div> 
    <div class="brown" style="float:left">Link two</div> 
    <div class="brown" style="float:left">Link three</div> 
    <div class="brown" style="float:left">Link four</div>  
</div>

ABOUT THE WIDTH: the display:inline applied on a block element without a fixed width, it force the width to collapse to the minimum value (width of the content + padding), because this is the normal behavior of an inline element.

The div element, by default, has a width of 100% ... so, when you apply a float:left the width is still set to 100% but the floating on the left force the browser to manage and display its width in an unordinary way! In this case there isn't a general rule, each element has a different behavior!

Answer 2

I always remember what floating is by remembering the original <img align="left" /> which acts very similar to float:left. Basically float, floats the image to the left and wraps the text or other content around it. Without float it would display as a piece of text.

Float works similar to other document tools where you can have the text wrap around the image (or HTML element).