CSSフローティング記述方法

この章では、主に位置決めとフローティングの一般的に使用される機能を記録します。

1. フローティング

フローティングと言えば、まず標準フローとフローティングフローについて話さなければなりません。

1. 標準ストリーム

標準ストリームは非常に一般的であり、ブラウザのデフォルトの方法は標準ストリームです。
標準ストリームを理解するには?
実装するには、CSS の 3 つの要素の分類を知る必要があります。 Inline要素、ブロックレベルの要素、インラインブロックレベルの要素

インライン要素ブロックレベル要素デフォルトはコンテンツと同じ幅ですデフォルトは親要素と同じ幅です幅と高さを設定できますおおよそ 3つの要素の区別が出てきます。 ここに別の知識ポイントを挿入します: HTML では、要素 (タグ) は通常 2 つのカテゴリに分類されます: テキストレベルのタグ

1行を排他的に占有します	排他的ではありません 行
デフォルトはコンテンツです		幅と高さは設定できません
幅と高さを設定できます
		コンテナレベルのタグ

p h ul ol li dt などspan/p/em/ins など ネストできるのはテキスト/画像/ハイパーリンクのみです 次に、標準的なフローについて説明します。標準的なフローには 2 つのレイアウト方法があります。ブロックレベル要素は垂直方向にレイアウトされ、インライン要素とインラインブロックレベルのレイアウトは水平方向に配置されます。2. フローティング属性: フロート

	他のすべてのタグをネストできます
	クリア

フロート

左/右

フローティングは許可されません左/右なしフローティングはありませんフローティングの際に注意すべき点がいくつかあります:

フロート左/右		両方/なし	neどちらか/なし
			フローティングとは、フロートを設定した後に要素がその周囲でどのように浮動するかを指します。 ！ ！
例えば、右とは、次の要素が左に配置されることを意味します。 ！ ！		フローティングフローは要素を区別せず、中央揃え（中央）なしで水平方向にのみ入力でき、マージン：0自動は使用できません。幅と高さの両方を設定できます。

特徴

前のものがフロートし、後続のものがフロートしない場合、前のものが後者のものをカバーします（テキストはカバーしませんが、回り込みます）。それらすべてを浮かんだアレンジシーンを考えてみてください。

先に浮くものは前、後から浮くものは後ろになります

浮いた後の位置は浮く前の標準フローでの位置によって決まります これは主にどのような要素であるかでわかります。フローティング後に影響を受けます親要素の幅がすべてのフロートを表示できる場合、それらは並べて表示されますサイドフロートの固着とは、主に親要素の幅が足りない場合に前傾してしまう現象のことを指します。ウィンドウを閉じてウィンドウの幅を減らすと、写真は自動的に下に配置されます

左のフロートは左のフロートを探し、右のフロートは右のフロートに従います

以上がCSSフローティング記述方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。