float:left; で作ったカラム内で float を使う

CSS のプロパティ float を使って2カラムレイアウトのページを作り、そのカラム内でさらに float を使って回り込みを行い clearfloat の解除を行うと2カラムレイアウトの float も解除されてしまう。

floatが解除されてしまった例

そこで、display:table; を使い clear を使わずにカラム内の float の効く範囲を限定させて clear を使わずに float の解除と同様の効果を再現する。

display:table;を使った例

#block-first {
    width: 100%; /* for inside float */
    display: table; /* for inside float */
}
#block-first-left {
    float: left; /* for inside float */
}
«
»