ホームページ > 記事 > ウェブフロントエンド > フローティング位置と絶対位置の違いは何ですか? _html/css_WEB-ITnose
フローティング位置と絶対位置の違いは何ですか? _html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:35:571213ブラウズ
这有一个小例子：
样式：
c9ccee2e6ea535a969eb3f532ad9fe89
#div1 {
background:#666;
float:left;
width:200px;
height:200px;
}
#div2 {
background:#093;
width:400px;
height:400px;
}
#div3 {
background:#363;
width:200px;
height:200px;
}
531ac245ce3e4fe3d50054a55f265927
结构：
6c04bd5ca3fcae76e30b72ad730ca86d
64cb571ed5952d9b43da1f2d70a36e91
e388a4556c0f65e1904146cc1a846bee111111194b3e26ee717c64999d7867364b1b4a3
e388a4556c0f65e1904146cc1a846bee111111194b3e26ee717c64999d7867364b1b4a3
e388a4556c0f65e1904146cc1a846bee111111194b3e26ee717c64999d7867364b1b4a3
e388a4556c0f65e1904146cc1a846bee111111194b3e26ee717c64999d7867364b1b4a3
16b28748ea4df4d9c2150843fecfba68
e450202a380711afa41e49a27da05f5a
e388a4556c0f65e1904146cc1a846bee222222294b3e26ee717c64999d7867364b1b4a3
e388a4556c0f65e1904146cc1a846bee222222294b3e26ee717c64999d7867364b1b4a3
e388a4556c0f65e1904146cc1a846bee222222294b3e26ee717c64999d7867364b1b4a3
e388a4556c0f65e1904146cc1a846bee222222294b3e26ee717c64999d7867364b1b4a3
16b28748ea4df4d9c2150843fecfba68
ad77cfaa418a727ce89c178a7ae0e3f9
e388a4556c0f65e1904146cc1a846bee333333394b3e26ee717c64999d7867364b1b4a3
e388a4556c0f65e1904146cc1a846bee333333394b3e26ee717c64999d7867364b1b4a3
e388a4556c0f65e1904146cc1a846bee333333394b3e26ee717c64999d7867364b1b4a3
e388a4556c0f65e1904146cc1a846bee333333394b3e26ee717c64999d7867364b1b4a3
16b28748ea4df4d9c2150843fecfba68
36cc49f0c466276486e50c850b7e4956
結果は次のようになります:
私の質問は次のとおりです:
1. フローティングはドキュメント フロー内の位置を占めますか?
2. div1 と div2 が重なった後、div2 のテキストが横に押し出されるのはなぜですか?つまり、div1 と div2 は重なっているのに、なぜ div2 の段落と重ならないのでしょうか?
専門家に詳しい解説を聞く！ ！ ！
ディスカッションに返信 (解決策)
絶対的な配置によりドキュメント フローから切り離されます
投稿者は Google にアクセスしてフロートを確認し、クリアに表示できます
フロートはフローティングであり、ドキュメント フローから切り離されません
たくさんの注文されたもの その中には、フロートがあります
そして、それが磁石に当たる鉄のブロックのように端に飛んでいくのを想像することができます スペースはまだ占有されています (デフォルトの幅属性は自動になっています)
2 つの場合。あなたが言及した問題については、W3C の float の説明を参照してください。 非常に簡単ですが、次の 2 つの文が W3C の float の説明です:
フローティング ボックスは、その外縁が包含ボックスまたは別のフローティング ボックスの境界線に触れるまで、左または右に移動できます。 。
フローティング ボックスはドキュメントの通常のフローにないため、ドキュメントの通常のフロー内のブロック ボックスは、フローティング ボックスが存在しないかのように動作します。
詳細については、直接クリックして表示してください: http://www.w3school.com.cn/css/css_positioning_floating.asp
これが発生する理由については、あなたが言及したテキストにも説明があります。
あなたが言及した 2 つの質問については、W3C の float の説明がどれほど簡単であるかを見てください。次の 2 つの文は、W3C の float の説明です。
フローティング ボックスは、外側の端が触れるまで左または右に移動できます。含まれているボックスまたは別のフローティング ボックスの境界線。
フロートはドキュメントの通常のフローにないため、ドキュメントの通常のフロー内のブロック ボックスはフロートが存在しないかのように動作します。
詳細については、直接クリックして表示してください: http://www.w3school.com.cn/css/css_positioning_floating.asp
これが発生する理由については、あなたが言及したテキストにも説明があります。
「フローティング ボックスはドキュメントの通常のフローにないため、ドキュメントの通常のフローにあるブロック ボックスはフローティング ボックスが存在しないかのように動作します。この文は少しわかりにくいので、詳しく説明してください。」
<html><head><title></title><meta content="text/html; charset=GB2312" /><style>.a{border:1px solid red;width:960px;margin:0 auto;}.b{float:left;height:100px;width:100px;background-color:#aaa}.c{height:50px;background-color:#ddd;}</style></head><body><div class = "a"> <div class = "b"></div> <div class = "c"></div></div></body></html>
効果画像:
このコードを例として、これら 3 つの div を表すために a、b、c を使用します。
a と c は通常のストリーム、b はフローティング ボックスです。
1: 理論によれば、a の高さはそのサブ要素の合計の高さに基づいて計算されますが、図からわかるように、a の高さは c の高さとのみ同じです。の場合、b の高さは無視されます。
2: ブロック ボックスは上下に配置されます。ここでは、c は b が存在しないかのように動作します。
これは、通常のフローのレイアウトでは、その前にフローティングボックスがあるかどうかを考慮していないと言っているだけではありませんか?
私の言っている意味が理解できたでしょうか。
なぜテキストが回避されるのですか? これは、上記のコードと同様に、ブラウザ自体がテキストを処理するためです。ブラウザのデバッグ ツールを使用すると、テキスト ラベル e388a4556c0f65e1904146cc1a846bee が実際にはまだ必要であることがわかります。行全体を上に移動しますが、テキストは左端から始まりません。テキスト式は特殊なケースです。
<html><head><title></title><meta content="text/html; charset=GB2312" /><style>.a{border:1px solid red;width:960px;margin:0 auto;}.b{float:left;height:100px;width:100px;background-color:#aaa}.c{height:50px;background-color:#ddd;}</style></head><body><div class = "a"> <div class = "b"></div> <div class = "c"></div></div></body></html>
レンダリング:
このコードを使用して、これら 3 つの div を表します。
a と c は通常のストリーム、b はフローティング ボックスです。
1: 理論によれば、a の高さはそのサブ要素の合計の高さに基づいて計算されますが、図からわかるように、a の高さは c の高さとのみ同じです。の場合、b の高さは無視されます。
2: ブロック ボックスは上下に配置されます。ここでは、c は b が存在しないかのように動作します。
これは、通常のフローのレイアウトでは、その前にフローティングボックスがあるかどうかを考慮していないと言っているだけではありませんか?
私の言っている意味が理解できたでしょうか。
なぜテキストが回避されるのですか? これは、上記のコードと同様に、ブラウザ自体がテキストを処理するためです。ブラウザのデバッグ ツールを使用すると、テキスト ラベル e388a4556c0f65e1904146cc1a846bee が実際にはまだ必要であることがわかります。 1 行上にありますが、テキストは左端から始まりません。テキスト式は特殊なケースです。
何が起こっているのかわかりませんが、ブラウザによって規定されているはずですが、関連する記事は見当たりません。
だから、本当に答えられないんです。
この問題については、こちらの記事 http://blog.sina.com.cn/s/blog_5f90da9b01016cmo.html でも言及されているようですが、理解できません