表示・配置

「float」プロパティ

「float」プロパティは、ブロック要素を左右に設置し、テキストやインライン要素がその周りを回りこめるように指定するCSSプロパティです。

本記事の内容

「float」プロパティの値

ブロック要素を左右に設置し、テキストやインライン要素がその周りを回りこめるように指定する単位は「none」「left」「right」「inline-start」「inline-end」などの値を指定することができます。

「float」プロパティの指定方法

ブロック要素を左右に設置し、テキストやインライン要素がその周りを回りこめるように指定する場合は、「float」プロパティを使い適応する値を指定することで実装できます。

「float」プロパティ
セレクタ{
float:ブロック要素を左右に設置;
}
値例
/* 基本値 */
float: none;/* 回り込みをしない */
float: left;/* ブロック要素を左に配置して、後続の内容を右側に回り込ませる */
float: right;/* ブロック要素を右に配置して、後続の内容を左側に回り込ませる */
float: inline-start;/* 左書きでは左側、右書きでは右側に回り込ませる */
float: inline-end;/* 左書きでは右側、右書きでは左側に回り込ませる */
表示例
「float」プロパティ
・ブロック要素を左右に設置（none）
・ブロック要素を左右に設置（none）
・ブロック要素を左右に設置（none）
・ブロック要素を左右に設置（none）
・ブロック要素を左右に設置（none）
「float」プロパティ
・ブロック要素を左右に設置（left）
・ブロック要素を左右に設置（left）
・ブロック要素を左右に設置（left）
・ブロック要素を左右に設置（left）
・ブロック要素を左右に設置（left）
「float」プロパティ
・ブロック要素を左右に設置（right）
・ブロック要素を左右に設置（right）
・ブロック要素を左右に設置（right）
・ブロック要素を左右に設置（right）
・ブロック要素を左右に設置（right）
«

おすすめの記事