float:left; vs display:inline; vs display:inline-block; vs display:table-cell;

My Question(s)

1. Are any of these methods preferred by a professional web designer?

2. Are any of these methods prefereed by a web browser when drawing the website?

3. Is this all just personal preference?

4. Are there other techniques I’m missing?

Note: Above questions are in regards to designing a multi-column layout

---

float:left;

http://jsfiddle.net/CDe6a/

This is the method I always use when creating column layouts, and it seems to work just fine. The parent does collapse on itself though, so you just need to remember to clear:both; afterwards. Another con that I just found was the inability to align text vertically.

display:inline;

This seems to correct the problem of the collapsing parent, but adds whitespace.

http://jsfiddle.net/CDe6a/1/

Removing whitespace from html seems to be the easiest fix this problem, but is not desired if you are really picky about your html.

http://jsfiddle.net/CDe6a/2/

display:inline-block;

Seems to behave exactly like display:inline;.

http://jsfiddle.net/CDe6a/3/

display:table-cell;

http://jsfiddle.net/CDe6a/4/

Works perfect.

My thoughts:

I’m sure I’m missing a ton of stuff, like certain exceptions that will break the layout but, display:table-cell; seems to work the best, and I think I will start replacing float:left; as I always seem to mess up on clear:both;. I’ve read many articles and blogs about this on the web, but none of them give me a definite answer on what I should use when laying out my website.