CSS基礎

divなどのブロックレベル要素は通常ソースで書かれた順番に上から下に縦に並びます。

しかしfloatを使う事で要素を浮かす事が出来、さらに左右どちらかの方向を指定する事で横に並べる事が出来ます。

floatを使う事でHTML内の文章構造を変える事なく自由なレイアウトが作れるようになります。
なのでfloatの特性をしっかり理解し、文章構造を変える事なく色々なレイアウトを作ってみましょう。

floatの注意点

floatは非常に便利な反面、しっかりと特性を理解しないとレイアウトの崩れの原因にもなります。
floatを指定した要素は浮き上がるので、その下の要素に影響が出てしまいます。なので、それを予防する為の方法もしっかりと覚えましょう。また、floatしたもの同士はマージンの相殺が起きず加算されてしまうので、そこも注意が必要です。

floatを使う際に注意するべき2点

• 下の要素に影響が出ないように回り込みを解除する（overflow、もしくはclear）
• floatしたもの同士はマージンの相殺が起きず加算されてしまう

2カラムレイアウト

2カラムレイアウトはwebサイトの基本レイアウトです。Floatの特性をしっかりと理解し、必ず作成出来るようになりましょう。

テキストの回り込み

以前は上記のようにレイアウト全般にfloatを使用していましたが、css3が採用された現在では、より自由度の高いレイアウト方法が色々あるので、その都度適切なレイアウト方法を選択する必要があります。
その中で現在、floatを使う場面は「テキストの回り込み」に限定されています。