CSSレイアウト-フロートとクリア
CSSfloatプロパティは、要素をどのようにフロートさせるかを指定します。
CSSclearプロパティは、クリアされた要素の横とどちら側にフロートできる要素を指定します。
floatプロパティ
このfloatプロパティは、コンテンツの配置と書式設定に使用されます。たとえば、画像をコンテナ内のテキストの左側にフロートさせます。
プロパティには、次のいずれかのfloat値を指定できます。
-
left-要素はコンテナの左側に浮かんでいます -
right-要素はそのコンテナの右側に浮かんでいます -
none-要素はフロートしません（テキスト内の出現する場所にのみ表示されます）。これはデフォルトです -
inherit-要素はその親のfloat値を継承します
最も簡単な使用法では、floatプロパティを使用して画像の周りにテキストを折り返すことができます。
例-float：right;
次の例は、画像がテキスト内で右に浮かぶように指定しています。
痛み自体は愛、主な記憶システムです。Phasellus imperdiet、いや、それは時々言われましたが、憎しみの欲求 マエケナスはファンであり、復讐心があり、料理ではなく、大衆生活の作者です。
例
img {
float: right;
}
例-float：左;
次の例では、画像をテキストの左側にフロートさせる必要があることを指定しています。
痛み自体は愛、主な記憶システムです。Phasellus imperdiet、いや、それは時々言われましたが、憎しみの欲求 マエケナスはファンであり、復讐心があり、料理ではなく、大衆生活の作者です。
例
img {
float: left;
}
例-フロートなし
次の例では、画像はテキスト内のその場所に表示されます（float：none;）：
痛み自体は愛、主な記憶システムです。Phasellus imperdiet、いや、それは時々言われましたが、憎しみの欲求 マエケナスはファンであり、復讐心があり、料理ではなく、大衆生活の作者です。
例
img {
float: none;
}
例-隣同士に浮かぶ
通常、div要素は互いの上に表示されます。ただし、を使用する場合はfloat: left、要素を隣り合わせにフロートさせることができます。
例
div {
float: left;
padding: 15px;
}
.div1 {
background: red;
}
.div2 {
background: yellow;
}
.div3 {
background: green;
}