这有一个小例子:
样式:
结构:
1111111
1111111
1111111
1111111
2222222
2222222
2222222
2222222
3333333
3333333
3333333
3333333
絶対的な配置によりドキュメント フローから切り離されます
投稿者は 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 が存在しないかのように動作します。
これは、通常のフローのレイアウトでは、その前にフローティングボックスがあるかどうかを考慮していないと言っているだけではありませんか?
私の言っている意味が理解できたでしょうか。
なぜテキストが回避されるのですか? これは、上記のコードと同様に、ブラウザ自体がテキストを処理するためです。ブラウザのデバッグ ツールを使用すると、テキスト ラベル
が実際にはまだ必要であることがわかります。行全体を上に移動しますが、テキストは左端から始まりません。テキスト式は特殊なケースです。
<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 が存在しないかのように動作します。
これは、通常のフローのレイアウトでは、その前にフローティングボックスがあるかどうかを考慮していないと言っているだけではありませんか?
私の言っている意味が理解できたでしょうか。
なぜテキストが回避されるのですか? これは、上記のコードと同様に、ブラウザ自体がテキストを処理するためです。ブラウザのデバッグ ツールを使用すると、テキスト ラベル
が実際にはまだ必要であることがわかります。 1 行上にありますが、テキストは左端から始まりません。テキスト式は特殊なケースです。
だから、本当に答えられないんです。
この問題については、こちらの記事 http://blog.sina.com.cn/s/blog_5f90da9b01016cmo.html でも言及されているようですが、理解できません