Understanding float and how and when to float an element in CSS3?

Question

I am unable to get my head right on this property. First, I tell you what knowledge I do have regarding this. I am focussing on <p> element with id="amazing" for this thread.

Now I give it a width

#amazing{
   width: 200px
}

The result is:

Since the paragraph is a block element, so no elements are going to move up beside it because all block elements have line breaks before and after them.

Now i float it by:

#amazing{
       width: 200px;
       float: right
 }

My understanding upto this part:

(1) First, the browser flows the elements on the page as usual, starting at top of the file and moving towards the bottom
(2) When the browser encounters the floated element, it places it all the way to the right, it also removes the paragraph from the flow just like it's floating on the page

Correct me if I am wrong till here...
Next,

Float property with CSS drop down menus

Consider this snippet taken from the web :
an unordered list with list items like this

             <ul id="menu">
                <li>
                    <a href="">Home</a>
                </li>
                <li>
                    <a href="">About Us</a>

                    <ul id="menu-about-us">
                        <li>
                            <a href="">The Team</a>
                        </li>
                        <li>
                            <a href="">History</a>
                        </li>
                        <li>
                            <a href="">Vision</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="">Products</a>
                    <ul>
                        <li>
                            <a href="">Cozy Couch</a>
                        </li>
                        <li>
                            <a href="">Great Table</a>
                        </li>
                        <li>
                            <a href="">Small Chair</a>
                        </li>
                        <li>
                            <a href="">Shiny Shelf</a>
                        </li>
                        <li>
                            <a href="">Invisible Nothing</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="">Conatct</a>
                    <ul>
                        <li>
                            <a href="">Online</a>
                        </li>
                        <li>
                            <a href="">Right Here</a>
                        </li>
                        <li>
                            <a href="">Somewhere Else</a>
                        </li>
                    </ul>
                </li>
            </ul>

Now if i do like this,

ul {
    font-family: Arial, Verdana;
    font-size: 14px;
    margin: 0;
    padding: 0;
    /*list-style: none;*/
}

ul li {
    display: block;      
    position: relative;
    float: left;
}
li ul {
    display: none;
}

For ul li, doesn't display: block will make them behave as block elements, But i see them as inline elements as shown in the figure. What good thing does float property does here?

ul li {
        display: block;      
        position: relative;
        float: left;
}

I seem to be too much perplexed. Kindly help me out... It would be better if someone clears this concept in context to how float will behave with block and inline elements.

Answer 1

It depends on the scenario and on what you would like to achieve Shirgill. I've prepared for you quick comparision on JS Fiddle --> http://jsfiddle.net/Lt7cftyc/

You're right. The behaviour of list when you set display:inline-block; to list with float attribute is very similar:

ul li {
display:inline-block;
}

will behave similar to:

ul li {
display:block;
float:left;
}

but there are some differences. For example you need to always clear floated elements to prevent unexpected behaviour:

clear:both;

In my example below, you can see different scenarios with inline and floated menu. You can play with it and see how it's gonna behave when you add margins or paddings to inline element and to floated element. You will be suprised.

ul.inline li {
 display:inline-block;
}

ul {
    font-size:14px;
    font-family: Arial;
    border: 1px solid black;
    background: lightblue;
    margin: 20px 0;
}

ul li {
    padding: 0 5px;
}

ul.floated2 {
    height: 20px;    
}

ul.floated li, ul.floated2 li {
    display:block;
    float:left;
}

.clr {
clear:both;
}

<p>This is example of inline list</p>
<ul class="inline">
    <li>menu 1</li>
    <li>menu 2</li>
    <li>menu3</li>
</ul>
<br />
<p>This is example of floated list. Note that there is no backgroud - first difference!</p>
<ul class="floated">
    <li>menu floated 1</li>
    <li>menu floated 2</li>
    <li>menu floated3</li>
</ul>

<br />
<p>This is example of floated list. The background is visible, but after I set height:20px;. </p>
<ul class="floated2">
    <li>menu floatedSecond Version 1</li>
    <li>menu floated 2</li>
    <li>menu floated3</li>
</ul>