フロートとは何ですか? float属性の詳しい説明

フロートとは何ですか? float を使用する理由 この記事では、float とは何か、レイアウトにおける float の役割、および float をクリアする方法を説明します。困っている友人は参考にしていただければ幸いです。

まず、float とは何かを理解しましょう。

float は css の位置決め属性です。その目的と起源を理解するには、タイポグラフィーのデザインを見てみましょう。印刷レイアウトでは、必要に応じてテキストが画像の周囲を折り返すように、画像をページに設定できます。これは、多くの場合、適切に「テキストの折り返し」と呼ばれます。以下に例を示します。

# ページ レイアウト プログラムでは、テキストを保持するボックスに、テキストの折り返しに従うか無視するかを指示できます。テキストの折り返しを無視すると、単語が画像上に存在しないかのように流れるようになります。これは、画像がページ フローの一部であるかどうかの違いです。ウェブデザインもよく似ています。

Web デザインでは、CSS float プロパティが適用されるページ要素は、印刷レイアウトで周囲にテキストが配置された画像のように動作します。フローティング要素は依然として Web ページのフローの一部です。これは、絶対に配置されたページ要素を使用する場合とは大きく異なります。印刷レイアウトのテキスト ボックスがページの折り返しを無視するように指示されるのと同じように、絶対に配置されたページ要素は Web ページ フローから削除されます。絶対的に配置されたページ要素は、他の要素の位置に影響を与えず、互いに接触しているかどうかに関係なく、他の要素も影響を与えません。

CSS を使用して要素に float を設定すると、次のようになります。

.demo {
  float: right;			
}

float 属性には、次の 4 つの有効な値があります。

left:要素を左に移動します。

right: 要素を右に移動するように設定します。

none: 要素を浮動にしないように設定します。 float 属性の値は親要素から継承される必要があります。

フローティングは、狭いエリアでのレイアウトにも役立ちます。たとえば、Web ページのこの小さな領域を考えてみましょう。小さなアバター画像に float を使用すると、その画像のサイズが変更されると、ボックス内のテキストが次のようにリフローされ、コンテナ上の相対位置を使用して次のようにフィットします。レイアウトは、アバター上の絶対位置を使用して実現することもできます。こうすることで、テキストはアバターの影響を受けず、サイズが変わってもリフローできなくなります。

float (float) を使用すると、要素を通常のフローから削除でき、他の要素がその隣に表示されるため、後続の要素が上に移動するのを防ぎたい場合は (以下に示すように)、フッターが上に移動するのを防ぎます) move)、これをクリアする必要があります。フッターのフロートをクリアして、フローティングされた 2 つの列の下にあることを確認する必要があります。この問題を解決するには、clear 属性を使用する必要があります。

.footer {
  clear: both;
}