Web Artisan Blog - ウェブ アルチザン ブログ

BLOGサイトの定番的なレイアウト、
当サイトで言うと、
左側メニュー・右側コンテンツの様なレイアウトを、
CSSの「float:left、right」で調整した場合、
左右の高さ（height）が対照でない為、
レイアウトがズレる（テキストが回り込む）場合がある。

このような場合は、「clear」で回り込みの解除を行わなくてはいけない。

clear: left;（左側回り込み解除）
clear: right;（右側回り込み解除）
clear: both;（両側回り込み解除）

ちなみに、
htmlのtableタグによるレイアウト調整に慣れてしまっている場合、
tableの1行目→左→右、
tableの2行目→左→右、
の様に、
上から下、左から右というhtml文書構造で定義しなくてはならないと考えてしまいがちだが、
CSSの「float」等を使用することで、
文書構造に囚われず、レイアウト調整する事が出来る。

※当サイトは、html文書構造はコンテンツ（右）→メニュー（左）
見た目は左→右。