I base most of my core layout choices first on browser scope, then by requirement. When I say “browser scope” what I really mean is, “oldest version of IE I have to support”:
Showing things side by side:
- IE7:
floats andclears - IE8–9:
inline-block,floats,clears - IE10+
flex
Vertical Centering:
- IE7–9:
inline-table;table-cell;table - IE10+:
flex
Getting stuff to take up horizontal space based on the content that’s there:
- IE7: non-adjacent sibling selector, arranging content
- IE8: adjacent sibling selector, arranging content
- IE9: pseudo selector madness
- IE10+:
flex
Modern Browsers
If my scope is IE10+, then I take a wildly different approach to this
Floats: when an image or media needs to be “floated” in a flow of text (you know… how it was meant to be used)inline-block: usually for buttons or inputs; things that need some padding and margin, but not to be full block levelflex: content and component-level layouts. I try to avoid it for page layouts, though. That doesn’t mean I won’t… but I find that flex isn’t really ideal in a page layout scenario… by nature of being flexible, that makes it hard to ask for rigid containers.table: tables. Only tables. Never anything other than tables.
출처 : https://www.quora.com/When-should-you-use-float-vs-inline-block-vs-table-vs-flex
