フローティング位置と絶対位置の違いは何ですか? _html/css

フローティング位置と絶対位置の違いは何ですか? _html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:35:57

オリジナル

1212 人が閲覧しました

这有一个小例子：
样式：

结构：

1111111

2222222

3333333

結果は次のようになります:

私の質問は次のとおりです:
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 が存在しないかのように動作します。
これは、通常のフローのレイアウトでは、その前にフローティングボックスがあるかどうかを考慮していないと言っているだけではありませんか?

私の言っている意味が理解できたでしょうか。

なぜテキストが回避されるのですか? これは、上記のコードと同様に、ブラウザ自体がテキストを処理するためです。ブラウザのデバッグツールを使用すると、テキストラベル

が実際にはまだ必要であることがわかります。行全体を上に移動しますが、テキストは左端から始まりません。テキスト式は特殊なケースです。

<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 でも言及されているようですが、理解できません