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

ホームページ

ウェブフロントエンド

htmlチュートリアル

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:35 AM

这有一个小例子：
样式：

结构：

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

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

HTML：それはプログラミング言語か何か他のものですか？Apr 15, 2025 am 12:13 AM

htmlisnotaprogramminglanguage; itisamarkuplanguage.1）htmlStructuresandformatswebcontentusingtags.2）ItworkswithcsssssssssdjavascriptforInteractivity、強化を促進します。

HTML：Webページの構造の構築Apr 14, 2025 am 12:14 AM

HTMLは、Webページ構造の構築の基礎です。 1。HTMLは、コンテンツ構造とセマンティクス、および使用などを定義します。タグ。 2. SEO効果を改善するために、などのセマンティックマーカーを提供します。 3.タグを介したユーザーの相互作用を実現するには、フォーム検証に注意してください。 4. JavaScriptと組み合わせて、動的効果を実現するなどの高度な要素を使用します。 5.一般的なエラーには、閉じられていないラベルと引用されていない属性値が含まれ、検証ツールが必要です。 6.最適化戦略には、HTTP要求の削減、HTMLの圧縮、セマンティックタグの使用などが含まれます。

テキストからウェブサイトへ：HTMLの力Apr 13, 2025 am 12:07 AM

HTMLは、Webページを構築するために使用される言語であり、タグと属性を使用してWebページの構造とコンテンツを定義します。 1）htmlは、などのタグを介してドキュメント構造を整理します。 2）ブラウザはHTMLを分析してDOMを構築し、Webページをレンダリングします。 3）マルチメディア関数を強化するなど、HTML5の新機能。 4）一般的なエラーには、閉じられていないラベルと引用されていない属性値が含まれます。 5）最適化の提案には、セマンティックタグの使用とファイルサイズの削減が含まれます。

HTML、CSS、およびJavaScriptの理解：初心者向けガイドApr 12, 2025 am 12:02 AM

webdevelopmentReliesOnhtml、css、andjavascript：1）htmlStructuresContent、2）cssStylesit、および3）Javascriptaddsinteractivity、形成、

HTMLの役割：Webコンテンツの構造Apr 11, 2025 am 12:12 AM

HTMLの役割は、タグと属性を使用してWebページの構造とコンテンツを定義することです。 1。HTMLは、読みやすく理解しやすいようなタグを介してコンテンツを整理します。 2。アクセシビリティとSEOを強化するには、セマンティックタグなどを使用します。 3. HTMLコードの最適化により、Webページの読み込み速度とユーザーエクスペリエンスが向上する可能性があります。