CSS Horizontal Align List Items - Display VS Float

I've had a basic understanding of CSS for about two year now. I haven't dug very deep into it, but I plan to very soon. In the process of "freshening up" I created a simple one page layout using HTML and CSS. It's not an actual design, just the layout. I was simply testing myself to make sure I could still do it.

Something I stumbled across was that if you have a unordered list that you want to display horizontally across the screen you would usually use display: inline, but float: left/right works the same way. It will cause your list to display horizontally.

So, is there any problem with using float instead of display for your lists? Is there any real difference in what happens when you use one or the other? From what I can see in toying with them, there is not.

 

List items may be displayed as blocks (display:block) or text-like items (display:inline). I always think of the latter simply as texts, which will automatically have some spacings in-between. And by default, texts will also be aligned vertically to the baseline (you know text, this is not exactly the bottom).

Blocks, on the other hand don't have spacings by default. To be like texts, you may try to float blocks and they will rearrange themself to the left / right instead of stacking-up. Unlike texts however, floating will make you will lose control on their vertical-alignment.

 

From here: http://stackoverflow.com/questions/...e-vs-displayinline-block-vs-displaytable-cell

I personally prefer to use display: inline-block for list items and float for layout columns etc.