ブロック要素を横に並べる方法をまとめた(法の命名は適当)。
 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
【table法】
┌──────────────────────────────────────┐
│  ┌table ───────────────────────────────┐  │
│  ┌tbody ───────────────────────────────┐  │
│  ┌tr─────────────────────────────────┐  │
│  ┌td──────┐┌td──────┐┌td──────┐┌td──────┐  │
│  │              ││              ││              ││              │  │
│  │              ││              ││              ││              │  │
│  └───────┘└───────┘└───────┘└───────┘  │
│  └──────────────────────────────────┘  │
│  └──────────────────────────────────┘  │
│  └──────────────────────────────────┘  │
└──────────────────────────────────────┘
  ・自由度が高いがCSSの原則からはずれる
 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
【float法】
┌──────────────────────────────────────┐
│  ┌div ─────┐┌div ─────┐┌div ─────┐┌div ─────┐  │
│  │display:block;││display:block;││display:block;││display:block;│  │
│  │float  :left; ││float  :left; ││float  :left; ││float  :left; │  │
│  └───────┘└───────┘└───────┘└───────┘  │
│  ┌div ────────────────────────────────┐  │
│  │                            clear:both;                             │  │
│  └──────────────────────────────────┘  │
└──────────────────────────────────────┘
  ・「clear:both」用のダミーdivが必要となる
    (後続のdivタグに「clear:both」役も兼用してもらうこともできるのだが)
 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
【clearfix法】
┌──────────────────────────────────────┐
│  ┌div ────────────────────────────────┐  │
│  │::after{clear:both;}                                                │  │
│  ┌div ─────┐┌div ─────┐┌div ─────┐┌div ─────┐  │
│  │display:block;││display:block;││display:block;││display:block;│  │
│  │float  :left; ││float  :left; ││float  :left; ││float  :left; │  │
│  └───────┘└───────┘└───────┘└───────┘  │
│  └──────────────────────────────────┘  │
└──────────────────────────────────────┘
  ・この方法はモダンブラウザでなければ通用しない(しかし今後の主流となるのでは)
 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
【inline-block法】
┌──────────────────────────────────────┐
│  ┌div ────────────────────────────────┐  │
│  ┌div ─────┐┌div ─────┐┌div ─────┐┌div ─────┐  │
│  │display       ││display       ││display       ││display       │  │
│  │:inline-block;││:inline-block;││:inline-block;││:inline-block;│  │
│  └───────┘└───────┘└───────┘└───────┘  │
│  └──────────────────────────────────┘  │
└──────────────────────────────────────┘
  ・隙間が空いてしまうので親divに「letter-spacing:-0.4em;」
    子divに「letter-spacing:normal;」(親divの影響を打消)を付加する裏技が必要
 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
【absolute法】
┌──────────────────────────────────────┐
│  ┌div ────────────────────────────────┐  │
│  │position:absolute;  height:固定;                                    │  │
│  ┌div ─────┐┌div ─────┐┌div ─────┐┌div ─────┐  │
│  │position      ││position      ││position      ││position      │  │
│  │    :absolute;││    :absolute;││    :absolute;││    :absolute;│  │
│  └───────┘└───────┘└───────┘└───────┘  │
│  └──────────────────────────────────┘  │
└──────────────────────────────────────┘
  ・縦幅が決まっている場合にしか使えない(可変に伸ばせない)