HTMLフロートとは

ページのレイアウトを制御するために最も一般的に使用されるHTML（HyperText Markup Language）およびカスケードスタイルシート（CSS）タグの1つは、floatタグです。 CSSおよびHTMLのフロートタグが要素に適用されると、ページのその部分は左または右にフロートします。 また、テキストなどの他の要素が周囲に流れます。

実際にHTML要素に適用されるCSSタグであるHTMLフロートは、さまざまなページレイアウトを実現するためにWebデザイナーがよく使用するプロパティです。 HTMLのfloatプロパティが画像やサイト構造の一部など、ページ上の要素に適用されると、要素はページの通常の「フロー」から削除され、左または右にフロートされます。 これにより、Webデザイナーはページ上の要素の表示場所をより詳細に制御できます。

CSSおよびHTMLのfloatタグの最も一般的な使用法の1つは、画像をページの左右に移動することです。 たとえば、画像が右にフロートされると、含まれる要素の右側に移動します。 ページ上のテキストは、フロートした画像の周りにも回り込みます。

HTML floatタグには、HTML要素に対する効果を変更するいくつかのプロパティがあります。 たとえば、左または右にフローティングする以外に、WebデザイナーはHTMLフロートタグを「継承」として指定できます。 これは、タグがその収容要素のfloatプロパティを継承することを意味します。 たとえば、ページの左に浮かぶボックス内に画像が配置されている場合、継承タグによって画像も左に浮かびます。

多くの場合、フロートタグと組み合わせて使用​​される便利なプロパティは、クリアタグです。 これは、フロートタグの後の要素の表示方法を制御します。 たとえば、画像が左に浮いていて、その下のテキストにクリアタグが適用されている場合、テキストは常に画像の横ではなく画像の下に表示されます。

CSSおよびHTMLのfloatタグが最初に導入されたとき、すべてのブラウザーでサポートされていませんでした。 ただし、2011年の時点で、すべての主要なブラウザーはfloatタグをサポートしています。 つまり、Webデザイナーは、ユーザーがWebサイトを表示しているブラウザーに応じて異なる外観を引き起こすかどうかを心配することなく、理論的にタグを使用できます。