CSS Float(フロート)

フロートとは何ですか?

float は float です。CSS でのその機能は、通常のドキュメント フローから要素を取り出し、その親要素の「左端」または「右端」に移動することです。以下では、この定義におけるいくつかの名詞の概念について説明します:

ドキュメント フロー: HTML では、ドキュメント フローは要素が上から下に配置される順序です。

ドキュメント フロー外: 要素が通常の順序から外れています。

左端/右端: 前述の親要素の左端と右端への移動は、要素が別の浮動要素または親要素のコンテンツ領域 (パディングを除く) の境界に当たるまで左または右に移動することを意味します。

float属性:

① left: 要素は左にフロートします。

② right: 要素は右にフロートします。

③ none: デフォルト値。

④inherit: 親要素からfloat属性を継承します。

例: 左float

       
  
div-a
 
div-b
 
div-c
 
div-d
  

例: 右float

       
  
div-a
 
div-b
 
div-c
 
div-d
  

隣り合う浮動要素

複数の浮遊要素を一緒に配置すると、スペースがあれば隣同士になります。

       
  
div-a
 
div-b
 
div-c
 
div-d
  

Float のクリア - Clear

を使用して要素をフローティングした後、周囲の要素が再配置されます。これを回避するには、clear 属性を使用します。

clear 属性は、浮動要素が要素の両側に表示できないことを指定します。