Why use float:left and display:inline at the same time?

Question

I’m watching a tutorial, where the teacher at a certain moment, minute 28, establishes the style of the elements of a ul to create a horizontal navigation bar, and do it using be the float:left that the display:inline. The problem is that I had seen yesterday that the methods I quoted above are two different methods to get the horizontal bar, but then because it uses both contemporaneously?

.mainheader nav ul li{
    float:left; /* li are set to the left of their "brothers"*/
    display:inline;
}

Answer 1

Generally, floating elements have a display value implicitly defined as block. However, the case of list items is an exception. According to the specification,

in CSS 2.1 is not defined if values list-item shall assume the computed value block or list-item.

^{(free translation)}

In Chrome, for example, floating list items leave the Bullets. I believe the intention to include display: inline in the rule was precisely to eliminate these Bullets, forcing them <li> float assume display: block instead of display: list-item.

Answer 2

These two instructions allow html elements <li> are arranged on each other’s side because by default the CSS displays an unordered list (<ul>) or ordered (<ol>) whose elements will be one beneath each other.

Thus will appear one item below the other.

<nav>
    <ul>
        <li>Item 01</li>
        <li>Item 02</li>
        <li>Item 03</li>
        <li>Item 04</li>
        <li>Item 05</li>
    </ul> 
</nav>

So an item will appear next to the other.

<style>
    /* Remove os pontos dos itens da lista */
    nav ul { list-style:none }

    /* Colocá-os (`<li>`) um ao lado do outro - Pode ser um ou outro */
    nav ul li { display:inline; display:inline-block; } 

    /* float: left me parece desnecessário neste caso. */
</style>

<nav>
    <ul>
        <li>Item 01</li>
        <li>Item 02</li>
        <li>Item 03</li>
        <li>Item 04</li>
        <li>Item 05</li>
    </ul> 
</nav>

Answer 3

Display is to make the element behave as block or inline according to the box model... Float, on the other hand, removes the element from the standard stream, making q float as if it were a layer... defining the layer by means of z-index... So you can use for example the two at the same time whenever you want q an element behaves like block or inline and q still leaves the flow