Question

The code sample below works almost the same, if I include or remove the ‘float: left’ line. The only difference is the float left version moves the blocks below it up a bit more, but not more than a line break. I don’t understand why you would add floating to an element set to 100% width. To my understanding,this prevents everything below it from flowing around it. Isn’t that the purpose of floating?

ul
{
    list-style-type: none;
    float: left;
    width:100%;
    padding:0;
    margin:0;
}

li
{
    display: inline;    
}

Answer 1

The reason why this works is because your <li> display is set to inline. This means that all elements with of this HTML tag will show up on the same line as all other ones. In other words, there will be no line-break. I would suggest the following instead:

ul {
    list-style-type: none;
    width: 100%;
    padding: 0px;
    margin: 0px;
    overflow: hidden; /* This will ensure there's a line break after using float for the list items */
}

li {
    float: left;
}

This way you can ensure that each list item can also use margin and padding properly as opposed to inline elements which act as characters in a string of text normally would.