table「あの程度で落ちるとは、横並び四天王の面汚しよ。」
flex「だが奴はわれら四天王の中で最弱。」
そのころ、一方・・・
float「俺は落ちてない。落ちたのはカラムだ。ちくしょう、clearできる要素さえあれば・・・。」
???「おやおや、情けないお姿だ。」
float「だれだ！？・・・お前はoverflow！」
overflow「float解除ができず、お困りのようですね。私が力をお貸ししましょう。」
float「力だと？」
overflow「はい。」
○floatについて
floatは要素を左または右に寄せて、スペースを空け、そこにほかの要素を入れることで横並びを実現するCSSプロパティです。
floatの特徴は要素を左（または右）に寄せたときその要素が浮き上がったようになってしまうということです。そうなるといくつか問題が起こります。
まず一つ目の問題は、隙間がある限り下にある要素が入り込んできてしまうということです。すると横並びにするつもりのないものまで横並びになってしまったり、レイアウトが崩れてしまったりします。
二つ目の問題は、子要素をすべてfloatさせた場合、親要素の高さが0になってしまいます。なので、背景画像などを入れている場合は出なくなってしまいます。
DEMO(float解除できてない)
直しました。
DEMO(float解除)
この問題を解決するためのプロパティがclearです。clearはfloatしている要素の下の要素にかける必要があります。
しかし、floatしている要素の下に要素がないと、clearをかけることができません。そんな時に登場するのがclearfixとoverflowです。
clearfixとは疑似要素でfloat要素の下にclearするための要素を作り出す方法です。以下のコードをCSSに書き、float要素の親要素にクラス属性として付与することで機能させます。
overflowは実際の機能としては、内側の要素の見え方を指定するプロパティです。これをfloat要素の親要素にかけることで、親要素の高さが戻ってきます。値はvisible以外にしましょう。
DEMO
floatについてはこのサイトが詳しくて、わかりやすかったです。
CSSの【float】についてちょっと本気出して説明してみた。（たねっぱさん）
inline-block「さて、次は俺の番だな。」
○inline-block
inline-blockはdisplayプロパティの値の一つで、inlineのように横に並びますが、blockのように幅・高さを取れるというものです。一見、ナビゲーションなどのような要素を横並びするには便利なように見えますが、一つ問題があります。 下のようにコード内で改行してしまうと、その分要素の間に隙間が空いてしまうということです。これはinlineの特性を持っているためです。
DEMO
この問題はinline-blockをかける要素を改行しないか、親要素にfont-size:0をかけるかすることで解決できます（子要素にfont-sizeを設定しなおすのを忘れないように注意）。
DEMO
さらにtext-alignの値によってカラム落ちしたときの挙動が変わります。こちらは最後のまとめDEMOにのせていますので、確認してください。
table「お前などまだまだだ。俺の力を見せてやろう。」
○table
これは親要素にdisplay:table、子要素にdisplay:table-cellを設定します。こうすると、子要素が横並びになります。
文字通りtableと同じようになるので、幅が縮まってもカラム落ちしません。さらに親要素にtable-layout:fixedをかけると子要素が同じ幅で親要素に収まるようになります（子要素にwidthを設定していない場合）。
DEMO
注意する点は、tableなのでmarginが効かないということです。他もいろいろtableと一緒です。
flex「真の強者がだれか、そろそろはっきりとさせる時がきたようだな。」
○flex
flexとはdisplayプロパティの値の一つです。以前はdisplay:boxだったりdisplay:flexboxだったりしたそうですが、現在では統一されて、モダンブラウザではほぼ使えるようです。 使い方は親要素にdisplay:flexをかけるだけです。 こう書くと簡単に思えますが、これだけではflexの利点はあまりありません。ここからいろいろと設定していきます。
DEMO
ここで使用しているプロパティは以下の通り。
・flex-wrap:wrap（はみ出した要素を折り返す）
・justify-content:center（子要素を中央揃えで配置）
・flex-grow:1（子要素の大きさの比。同じものは同じ大きさに。数字の大きいものが大きくなる。）
・flex-shrink:1（子要素の縮み具合の比。0にすると縮まない。）
・flex-basis:100px（基本となる大きさを設定する。あとは親要素の幅に従う。要するに幅を設定する。）
非常にざっくりした説明ですが、いろいろ試してみてください。以下のサイトが詳しいです。
CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説（colissさん）
○横並び比較
4種類の横並びを一つにしてみましたので、画面を縮めたりして試してみてください。
DEMO
コードはこちら（HTMLはすべてul,liで組んでいます。すべてのタグにmargin:0 padding:0 box-sizing:borderboxをかけています。）
それぞれに良さがありますので、状況に応じて使い分けていきましょう。今回は紹介が目的なので簡単な説明だけにしましたが、今後、機会があればそれぞれについて詳しく書いていきたいと思います。
