CSS入門 | CSS位置プロパティ | Float

CSS floatプロパティ

プロパティ	説明
float	HTML要素が周辺のほかの要素と自然に並ぶように設定する。
clear	`float`プロパティが適用された後に現れる要素が、これ以上`float`プロパティの影響を受けないように設定する。
overflow	contentのサイズが、その要素を囲むcontainer要素より大きいとき、どのように処理するかを設定する。
overflow-x	contentのサイズが該当要素の水平方向boxを超えるとき、どのように処理するかを設定する。
overflow-y	contentのサイズが該当要素の垂直方向boxを超えるとき、どのように処理するかを設定する。

floatプロパティ

floatプロパティは、該当HTML要素が周辺のほかの要素と自然に並ぶようにする。このプロパティは本来その目的で作られたが、現在はWebページのレイアウトを作成するときによく使われる。

次の例は、画像と文字を一緒に出力する例である。

<style>
    img { float: left; margin-right: 20px; }
</style>

clearプロパティ

clearプロパティは、floatプロパティが適用された後に現れる要素の動作を調整する。 container要素にfloatプロパティが適用されると、その後に登場するすべての要素の正確な位置を設定するのが非常に難しくなる。

<style>
    .left { background-color: #FF8C00; width: 150px; height: 50px; float: left; }
    .right { background-color: #9932CC; width: 150px; height: 50px; float: right; }
</style>

そのため、floatプロパティを適用したい要素がすべて登場した後は、clearプロパティを使って、その後に登場する要素がこれ以上floatプロパティの影響を受けないよう設定する必要がある。

<style>
    .left { background-color: #FF8C00; width: 150px; height: 50px; float: left; }
    .right { background-color: #9932CC; width: 150px; height: 50px; float: right; }
    p { clear: both; }
</style>

overflowプロパティ

floatプロパティが適用されたHTML要素が、それを囲んでいるcontainer要素より大きい場合、該当要素の一部が外へあふれる。このときoverflow値をautoに設定すると、container要素のサイズが内部の要素を包めるだけ自動的に大きくなる。

<style>
    div { border: 3px solid #73AD21; padding: 5px;}
    img { float: left; }
    .good { overflow: auto; }
</style>

floatプロパティを使ったレイアウト

現在のWebページのレイアウトは、多くの場合floatプロパティを使って作成されている。

次の例は、floatプロパティを使って作成されたレイアウトを示す。

<style>
    div.page { border: 3px solid #CD5C5C; overflow: auto; }
    h2 { text-align: center; }
    header{ border: 3px solid #FFD700; }
    nav { border: 3px solid #FF1493; width: 150px; float: left; }
    section { border: 3px solid #00BFFF; margin-left: 156px; }
    footer{ border: 3px solid #00FA9A; }
</style>