displayに指定できる値を調べてみた。
┌─────────┬────────────────────────────┐
│none              │非表示                                                  │
├─────────┼────────────────────────────┤
│block             │ブロック要素                                            │
│inline-block      │インラインブロック要素                                  │
│inline            │インライン要素                                          │
├─────────┼────────────────────────────┤
│table             │(tableタグ系の)tableタグ相当                            │
│inline-table      │(tableタグ系の)tableタグ相当(インライン要素版)          │
│table-header-group│(tableタグ系の)theadタグ相当                            │
│table-footer-group│(tableタグ系の)tfootタグ相当                            │
│table-row-group   │(tableタグ系の)tbodyタグ相当                            │
│table-row         │(tableタグ系の)trタグ相当                               │
│table-cell        │(tableタグ系の)tdタグ相当                               │
│─────────┼────────────────────────────│
│table-caption     │(tableタグ系の)captionタグ(見出)相当                    │
│table-column-group│(tableタグ系の)colgroupタグ(列グループ定義)相当         │
│table-column      │(tableタグ系の)colタグ(列定義)相当                      │
├─────────┼────────────────────────────┤
│list-item         │liタグ相当                                              │
│marker            │マーカー要素                                  (廃止予定)│
├─────────┼────────────────────────────┤
│ruby              │ルビ要素                                                │
│ruby-base-group   │ルビ要素                                                │
│ruby-base         │ルビ要素                                                │
│ruby-text-group   │ルビ要素                                                │
│ruby-text         │ルビ要素                                                │
├─────────┼────────────────────────────┤
│run-in            │文脈に応じてブロック要素またはインライン要素            │
│compact           │文脈に応じてブロック要素またはインライン要素            │
├─────────┼────────────────────────────┤
│inherit           │親要素を継承                                            │
└─────────┴────────────────────────────┘
いろいろあるんだね。
簡単にdivタグをtableタグ代替にできるようtableタグ系が広まることを期待。

ブロック要素を横に並べる方法をまとめた(法の命名は適当)。
 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
【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;│  │
│  └───────┘└───────┘└───────┘└───────┘  │
│  └──────────────────────────────────┘  │
└──────────────────────────────────────┘
  ・縦幅が決まっている場合にしか使えない(可変に伸ばせない)

「block」と「inline」があって、その中間に「inline-block」がある。
┌───────────┬──────────────────────────┐
│         CSS          │                      主なタグ                      │
├───────────┼──────────────────────────┤
│display:block;        │div、table                                          │
├───────────┼──────────────────────────┤
│display:inline-block; │img、input、select、textarea                        │
├───────────┼──────────────────────────┤
│display:inline;       │span、a                                             │
└───────────┴──────────────────────────┘
┌─────────────────┬──────┬──────┬──────┐
│                                  │   block    │inline-block│   inline   │
├─────────────────┼──────┼──────┼──────┤
│行の占有                          │     ○     │     ×     │     ×     │
├─────────────────┼──────┼──────┼──────┤
│「height」「width」の指定         │     ○     │     ○     │     ×     │
├─────────────────┼──────┼──────┼──────┤
│「padding」の指定                 │     ○     │     ○     │△(左右だけ)│
├─────────────────┼──────┼──────┼──────┤
│「margin」の指定                  │     ○     │     ○     │△(左右だけ)│
├─────────────────┼──────┼──────┼──────┤
│「vertical-align」の指定          │     ×     │     ○     │     ○     │
└─────────────────┴──────┴──────┴──────┘
  ・昔のブラウザでは「inline-block」は未対応だった(「block」扱いとなる)
    ＃IEはIE8以降で対応、Firefox等も昔は未対応だった
  ・昔のIEでは「inline」でも「height」「width」の指定ができた

tdタグ中の文字は、既定で「vertical-align:middle;」なので
縦位置は中央に表示される。

で、tdタグをdivタグに移行した場合、divタグに「vertical-align:middle;」を
指定してもうんともすんともいわない(上詰になる)。

「vertical-align」が使えるのは、テーブルセルとインライン要素のみで、
ブロック要素のdivタグでは無効ということだ。

インライン要素ってそもそもブロック要素と違って縦幅とか指定できなかったはずだ。
ということで、テーブルセルの代替となるようなものはない…と思いがちだが、
spanタグの「line-height」を広げれば、そんな感じにはなる。
┌──────────────────────────────────────┐
│span {                                                                      │
│    line-height         :160px;                                             │
│    vertical-align      :middle;                                            │
│}                                                                           │
└──────────────────────────────────────┘
但し、spanタグ中で改行が入ると「line-height」毎に一行ずつ表示されるから注意。

┌──────────────────────────────────────┐
│                                   あいう                                   │
│                                   えお                                     │
└──────────────────────────────────────┘
上記のように複数行を左寄せしてさらにそれをセンタリングするには、
以下いずれかのtableタグで実現できる。
┌──────────────────────────────────────┐
│<table style="margin:auto;">                                                │
│  <tr><td>あいう<br>えお</td></tr>                                          │
│</table>                                                                    │
└──────────────────────────────────────┘
┌──────────────────────────────────────┐
│<table style="margin:auto;">                                                │
│  <tr><td>あいう</td></tr>                                                  │
│  <tr><td>えお</td></tr>                                                    │
│</table>                                                                    │
└──────────────────────────────────────┘
これをtableタグを使わずにdivタグでできないものか？

こうする。
┌──────────────────────────────────────┐
│body {                                                                      │
│    text-align          :center;                                            │
│}                                                                           │
│div {                                                                       │
│    display             :inline-block;                                      │
│    text-align          :left;                                              │
│}                                                                           │
├──────────────────────────────────────┤
│<body>                                                                      │
│<div>あいう<br/>えお</div>                                                  │
│</body>                                                                     │
└──────────────────────────────────────┘
「display:inline-block;」を使うのだ。
純粋なブロック要素でなくなるので、「margin:auto;」は使えないが、
外側で「text-align:center;」してあげればよい。
なお、外側のセンタリングが内側にも継承されるので、
内側で左寄せ「text-align:left;」してあげるのを忘れずに。

なお、「display:inline-block;」はIE8から使用可能となった(IE7以前は使えない)。

CSSで末尾の「;」を忘れると結構厄介だ。

例えばこんな感じ。
┌──────────────────────────────────────┐
│div#main {                                                                  │
│    top                 :0     /* ←「;」が漏れている */                    │
│    height              :1em;  /* ←効かない          */                    │
└──────────────────────────────────────┘
後続の指定が効かなくなってしまう。

ということで、そういうのをみつける正規表現。
┌──────────────────────────────────────┐
│:[^;]*$                                                                     │
└──────────────────────────────────────┘
「:」で始まって、「;」がないまま終わっている行を抽出してくれる。

もちろん、二行に渡って書いたりしたら抽出されてしまうし、
「a:link」みたいなのも抽出されてしまう。
ま、そこはご愛嬌(そんなに多くないはず個別に判断して)ということで。

┌──────────┐
│┌──┬──┬──┐│
││    │    │    ││
││    │    ├──┘│
│└──┤    │      │
│      │    │      │
│      └──┘      │
└──────────┘
float要素を横に並べると、高さが揃わないことがある。
tableタグだったらこんなことにならないのに…などと思ってしまうが
これを解消する方法。

┌──────────────────────────────────────┐
│float           :left;                                                      │
│padding-bottom  : 32767px;                                                  │
│margin-bottom   :-32767px;                                                  │
└──────────────────────────────────────┘
「float:left;」などを定義する要素に、下方向へのとっても大きなパディングと
ネガティブマージンを同時に定義してあげる。
とっても大きなというのは表示ウインドウサイズをはみ出るくらいの大きさ。
ま、指定できる最大値の「32767px」あたりを定義してあげればいい。

これによって、あら不思議、一番長い縦幅に揃ってくれるのだ。
┌──────────┐
│┌──┬──┬──┐│
││    │    │    ││
││    │    ├──┘│
│└──┤    │ ↓ ││
││ ↓ │    │ ↓ ││
│└──└──┘──┘│
└──────────┘
でも、なんか裏技っぽいようなぁ。
なんでdivはtable同等の機能を標準で備えていないんだと
相変わらずの疑問が湧くのであった。

…と思っていたら、将来的には
  「display:table;」(親要素)と「display:table-cell;」(子要素)
ってのが、主流になりそうな感じなのね(IE8から使えてる？)。

以下のようなfloat要素を内包するdivタグの場合、高さ(縦幅)は「0」である。
よって、背景色を指定しても表示されない。
┌──────────────────────────────────────┐
│<div style="background-color:#FF0000;">                                     │
│<div style="float:left;height:1em;width:1em;"></div>                        │
│</div>                                                                      │
└──────────────────────────────────────┘
通常は、内包する要素によって外側も拡げられるものだが
float要素の場合は、内包とはいっても浮いてる感じなので
外側としては最低限の大きさしか持たない状況になる。

で、これを解消して、外側のdivタグにも高さや横幅を持たせる方法。
以下のいずれか。

(1) 外側のdivタグに「overflow:hidden;」を持たせる
┌──────────────────────────────────────┐
│<div style="overflow:hidden;background-color:#FF0000;">                     │
│<div style="float:left;height:1em;width:1em;"></div>                        │
│</div>                                                                      │
└──────────────────────────────────────┘
「overflow:auto;」「overflow:scroll;」でも大丈夫。
既定の「overflow:visible;」がダメなようだ。

(2) clear要素を最後につける
┌──────────────────────────────────────┐
│<div style="background-color:#FF0000;">                                     │
│<div style="float:left;height:1em;width:1em;"></div>                        │
│<div style="clear:both;"></div>                                             │
│</div>                                                                      │
└──────────────────────────────────────┘
「float:left;」向けの「clear:left;」、
「float:right;」向けの「clear:right;」もあるが、
両方兼ねる「clear:both;」が便利。

(3)after疑似要素を使う
┌──────────────────────────────────────┐
│<div style="background-color:#FF0000;" class="■">                          │
│<div style="float:left;height:1em;width:1em;"></div>                        │
│</div>                                                                      │
├──────────────────────────────────────┤
│.■:after {                                                                 │
│    content             :"";     /* after疑似要素の必須項目 */              │
│    display             :block;  /* after疑似要素の必須項目 */              │
│    clear               :both;                                              │
│}                                                                           │
└──────────────────────────────────────┘
モダンブラウザ(この場合はIE8以降)であれば、
clear要素のタグをわざわざ作らなくとも、CSS上で制御できる。
「content」の指定がないと効かないので、ダミーで「""」でも指定しておく。

(4) 外側のdivタグ自体を「float:left;」にして「width:100%;」にする
┌──────────────────────────────────────┐
│<div style="float:left;width:100%;background-color:#FF0000;">               │
│<div style="float:left;height:1em;width:1em;"></div>                        │
│</div>                                                                      │
└──────────────────────────────────────┘
ちと強引すぎるが、こういう方法もあるよということで。

ネガティブマージンの対象を変えれば、自分の領域を減らすっぽいことができる。
  「margin-bottom:-1em;」→「margin-top:-1em;」
┌───────────┐  ┌───────────┐
│div#A {               │  │div#A {               │
│  height        :2em; │  │  height        :2em; │
│  width         :2em; │  │  width         :2em; │
│  border-right  :1em; │  │  border-right  :1em; │
│  border-bottom :1em; │  │  border-bottom :1em; │
│                      │  │  margin-top    :-1em;│
│}                     │  │}                     │
│div#B {               │  │div#B {               │
│  height        :2em; │  │  height        :2em; │
│  width         :2em; │  │  width         :2em; │
│}                     │  │}                     │
├───────────┤  ├───────────┤
│                      │  │    ┌───┬─┐    │
│                      │  │    │      │  │    │
│‥‥┌───┬─┐‥‥│  │‥‥│  Ａ  │  │‥‥│
│    │      │  │    │  │    │      │  │    │
│    │  Ａ  │  │    │  │    ├───┘  │    │
│    │      │  │    │  │    │        ａ│    │
│    ├───┘  │    │  │    ├───┬─┤    │
│    │        ａ│    │→│    │      │  │    │
│    ├───┬─┤    │  │    │  Ｂ  ├─┤    │
│    │      │  │    │  │    │      │  │    │
│    │  Ｂ  ├─┤    │  │    ├─┬─┼─┤    │
│    │      │  │    │  │    │  │  │  │    │
│    └───┴─┘    │  │    └─┴─┴─┘    │
└───────────┘  └───────────┘
もちろん玉突き式に反対側に迷惑をかけることになるのだが、
ウインドウの端っこであれば、ごまかすこともできる。

「border」で周囲に線を引くと、その分、その領域が占領する面積が増えてしまう。
その結果、隣の領域を追い出す形になる。

そこで、ネガティブマージンを使えば追い出さないようにすることができる。
┌───────────┐  ┌───────────┐
│div#A {               │  │div#A {               │
│  height        :2em; │  │  height        :2em; │
│  width         :2em; │  │  width         :2em; │
│  border-right  :1em; │  │  border-right  :1em; │
│  border-bottom :1em; │  │  border-bottom :1em; │
│                      │  │  margin-bottom :-1em;│
│}                     │  │}                     │
│div#B {               │  │div#B {               │
│  height        :2em; │  │  height        :2em; │
│  width         :2em; │  │  width         :2em; ├───────────┐
│}                     │  │}                     │以下ではない          │
├───────────┤  ├───────────┼───────────┤
│    ┌───┬─┐    │  │    ┌───┬─┐    │    ┌───┬─┐    │
│    │      │  │    │  │    │      │  │    │    │  Ａ  │  │    │
│    │  Ａ  │  │    │  │    │  Ａ  │  │    │    ├───┘  │    │
│    │      │  │    │  │    │      │  │    │    │        ａ│    │
│    ├───┘  │    │  │    ├───┤  │    │    ├───┬─┤    │
│    │        ａ│    │→│    │      │ａ│    │    │      │  │    │
│    ├───┬─┤    │  │    │  Ｂ  ├─┤    │    │  Ｂ  ├─┤    │
│    │      │  │    │  │    │      │  │    │    │      │  │    │
│    │  Ｂ  ├─┤    │  │    ├─┬─┼─┤    │    ├─┬─┼─┤    │
│    │      │  │    │  │    │  │  │  │    │    │  │  │  │    │
│    └───┴─┘    │  │    └─┴─┴─┘    │    └─┴─┴─┘    │
└───────────┘  └───────────┴───────────┘

ここで、間違ってはいけないのが、ネガティブマージにより
自分の本丸を小さくするのではないということ。
隣の領域の開始位置を自分の領域に食い込ませる、つまり、踏んづけてもよしと
するというのがネガティブマージンだ。

つまり、上記のように、「border」と「-margin」を同じ値にするということは、
「boder」の分、自分の領域を減らすのではなく、「border」の上に
のっかてもいいよと許可を出すみたいなもんだ。
もちろん「border＜-margin(の絶対値)」の場合には、
「boder」の内側、つまり自分の領域に浸食されることになる。

つまり、「border」と「-margin」を同じ値にするということは、
他人の領地を侵略しないということではなく
他人の領地を侵略しておいて(線を引いておいて)、
自由にそこに物を置いてもいいですよと言っているようなもんだ。