float とは何ですか? CSS はどのようにして float をクリアしますか?

この記事では、CSS クリアの原理 (コード付き) を紹介します。必要な方は参考にしていただければ幸いです。

私は最近 CSS について学び、高さが崩れるときにフロートをクリアする必要があることを知りました。フローティングの原理を明確に理解するために、インターネットで多くの情報を検索しましたが、それらはあまり明確ではなく、すべてが間違っていることがわかりました。フローティングの原理を明確に理解している場合は、

フローティングの効果 に直接ジャンプできます。フローティング (キーポイント) の読み方 1. フローティングとは何ですか

まず、位置を知る必要があります 問題を解決する前に、まず位置を確認しましょう。いくつかの配置方法を理解する1. 通常のフロー配置 (デフォルトの方法)
通常のフロー配置、ドキュメント フロー配置とも呼ばれ、ページ上のブロック レベルの要素のデフォルトの配置方法です。1 つずつ配置されます。ページ上で上から下に 1 つずつ配置します。しかし、複数のブロックレベルの要素を 1 行に表示するにはどうすればよいでしょうか?
float 属性の値は left/right です
この属性は元々はレイアウトではなく、Text の折り返しに使用されていましたが、その後、レイアウトにも適していることがわかり、使い続けられ、場合によっては忘れてしまうこともありましたテキストの折り返しに使用します3. 相対位置設定相対

要素の位置を変更した後、要素は元の位置に対して一定量オフセットされますが、要素の元のスペースは保持されます。属性:position
Value:relative
offset属性(top/right/bottom/left)で位置を変更できます

4. 絶対配置Absolute 要素が絶対配置に設定されている場合、次のようになります。特徴
1. ドキュメントフローの外 - ページスペースを占有しません
2. オフセット属性により要素の位置を固定します
3. 最も近い位置にある祖先を基準として、要素は固定位置を実現します 4. 位置決めされた祖先要素がない場合、位置は元の包含ブロック (body, html) に対して相対的に固定されます 属性:position
値:絶対
offset 属性 (top/right/bottom/left) と組み合わせて固定位置を実現します

5. 固定位置固定
要素をページ上の特定の位置に固定し、スクロールバーによって位置は移動しません 属性:position
値: 固定
offset 属性(top/right/bottom/left)を使用すると、位置が固定されます



2. フローティングの効果


フローティングの後はどうなりますか？
1. フローティングに配置された要素はドキュメント フローから除外されます - ドキュメント フローの外 (ページ スペースを占有しない)、残りの要素はスペースを埋めるために前に出てくる必要があります
2. フローティング要素は左側にドッキングされますまたは親要素の右側、または他の浮動要素の端にドッキング（要素は現在の行でのみ浮動できます）
3. 浮動要素は依然として親要素内に位置します
4. 浮動要素の処理に関する問題 - 問題を解決します複数のブロックレベル要素を1行に表示する問題

1. フロート要素をすべて1行に表示できない場合、最後の要素が別の行に折り返されてしまいます 2. 要素がフローティングされると、幅はアダプティブ（幅はコンテンツによって決まります） 3. 要素がフローティングになると、上昇後はブロックレベルの要素になります、特にインライン要素の場合、最も大きな影響があります ブロックレベルの要素：サイズの変更は許可 インライン要素: サイズの変更は許可されません
4. テキスト、インライン要素、インラインブロック要素は、浮動要素が下に埋もれないように配置され、浮動要素は賢く回避されます浮いた後はどんな影響があるのでしょうか？ フローティング要素はドキュメントフローから切り離されるため、ページスペースを占有せず、親要素の高さに一定の影響を与えます。要素に含まれるすべての要素が浮動要素の場合、要素の高さは0になります(高さ崩壊)



3. 浮動小数点数をクリアする方法(要点)




解法と原理分析

原則: すべての子要素が浮動している場合、親要素は折りたたまれます。したがって、すべての浮動子要素の後に非浮動子要素を追加します。この要素は親要素を支えます。この要素は見つからず、内部にコンテンツを含めることはできません。コンテンツがある場合は、非表示にする必要があります。 おすすめ関連記事: CSSのtransform-origin属性は何をするのですか?変換元属性の役割

CSS言語を使用したLightning接続線の作成例

以上がfloat とは何ですか? CSS はどのようにして float をクリアしますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。