W3School の例はこちら http://www.w3school.com.cn/tiy/t.asp?f=html_layout_ps 内のコードと次の図を参照して、私の問題を理解してください。

まず、理解できないのは、最初の「float:left;」を削除した後、なぜ画像のように余分な空白行が存在するのでしょうか？ 「float:left;」には暗黙のルール属性がありますか?

「float:left;」が左へのフローティングを意味することは知っています。W3School の CSS ドキュメントには、「float:left;」がなければ、「フローティング要素はブロックレベルのボックスを生成する」とだけ書かれています。余分な行があってはなりません。問題がどこにあるかを指摘してください。

また、2番目の「float:left;」を削除すると、灰色の領域が150px左に縮小（ディスプレイスメント）するのは理解できるのですが、なぜ上のテキストは縮小（ディスプレイスメント）しないのですか？

実際、2番目の「float:left;」を削除した後、灰色の領域が移動するのはなぜですか? 黄色の領域はブロックレベルの要素であり、灰色の領域はインラインであるため、それぞれに干渉しないからですか?他の？それでも、灰色の領域の「コンテンツはここにあります」というテキストが左側に移動し、黄色の領域の文字と重なるはずです。アドバイスをお願いします。

私はHTMLを独学で勉強し始めたばかりの初心者なので、要素間の関係を深く理解していない可能性があります。よろしくお願いします。

ディスカッションへの返信（解決策）

最初の質問: 空白行があるのは、その下の

タグにデフォルトの margin 属性があるためです。
2 番目の質問: これまでこの問題に特に注意を払っていなかったので、p の文字にはデフォルトで float:left 属性があると思います。この場合、浮動要素は浮動要素の隣になければなりません。この行のテキストは p では移動しません。

1. DIV タグのデフォルトのスタイル margin-top は問題を引き起こすため、

<br/>

2. を追加することをお勧めします。これは DIV width:100% のデフォルト属性でもあります

スタイル シートの先頭にある上記のとおり: 実際、ほとんどのタグにはデフォルトで 10px の margin および padding 属性値が設定されている可能性があるため、ほとんどの CSS は、目的の効果を達成するために、最初にこれらの値を 0 に設定します: body、html , h1, h2.... .p,ul,li,....{padding:0;margin:0}

2. 設定しなくても、どのように繰り返すことができますか?その場合、幅は内部のコンテンツに基づいて自動的に決まります。それら 2 つは同じ p ではありません。つまり、別のコンテナーです。画面幅が許す限り、それらを別のコンテナーの後ろに並べるにはどうすればよいでしょうか。実際、2 番目の質問は最初の質問と似ています。デフォルトの 10 ピクセルがあり、150 ピクセル + 350 ピクセルが必要であると考えて、それを計算に含めなかったのです。実際には、10 ピクセルも考慮する必要があります。の上下左右の値。

最初の質問: 空白行がある理由は、その下の

タグにデフォルトの margin 属性があるためです。
2 番目の質問: これまでこの問題に特に注意を払っていなかったので、p の文字にはデフォルトで float:left 属性があると思います。この場合、浮動要素は浮動要素の隣になければなりません。この行のテキストは p では移動しません。

とても分かりやすく説明していただきました！

1.メニューのh2を削除して問題を解決します。
2. コンテンツと位置に相対、絶対、、を追加して効果を確認します。 。

1、空行は h2 の margin-top が隣接する親要素と重なっているためです
通常のフローでは、垂直マージンの重なり (圧縮/オーバーレイ) は CSS 要件です。
要素がフローティングされている場合、垂直方向の余白は重なりません。

2. 背景の黄色を取り除くと、灰色の部分が左端から始まっていることがわかります。
黄色の部分が浮いていて灰色の部分が浮いていない場合、ブロックボックスは黄色の要素が存在しないかのように左端から始まりますが、その内容（テキスト）は浮動要素の右と下を回り込みます(コンテンツが十分に長い場合)。

これはいわゆる、浮遊要素が通常の流れから [部分的に] 離脱することです。
通常のフローから[完全に]分離された絶対配置要素とは異なり、フローティング要素はスペースを占有し、後続の要素にも影響を与えます。
これらの視覚的な書式設定の規則は、w3.org の CSS マニュアルを見ることで確認できます。
ビジュアルフォーマット部分の内容は非常に重要であり、フローティング、位置決めなどに関する質問への答えがあります。
または、「CSS の決定版ガイド」をご覧ください。

最初の質問: 空白行があるのはその下の

タグにはデフォルトの margin 属性があります。
2 番目の質問: これまでこの問題に特に注意を払っていなかったので、p の文字にはデフォルトで float:left 属性があると思います。この場合、浮動要素は浮動要素の隣になければなりません。この行のテキストは p では移動しません。

その場合、私は尋ねたいです:

最初の質問: 最初の float:left; を追加した後、その下の

タグが無効になるのはなぜですか?どのようなルールが守られていましたか?
2 番目の質問: 一方、テキストを p でシフトさせる方法はありますか? float:none; を p#content に追加するか、

を使用してみました。 最初の質問: 空白行がある理由は、その下の

タグにデフォルトの margin 属性があるためです。
2 番目の質問: これまでこの問題に特に注意を払っていなかったので、p の文字にはデフォルトで float:left 属性があると思います。この場合、浮動要素は浮動要素の隣になければなりません。この行のテキストは p では移動しません。

とても分かりやすく説明していただきました！

モデレーターさん、私も考えてみたいと思います:

最初の質問: 最初の float:left; を追加した後、その下の

タグが無効になるのはなぜですか?どのようなルールが守られていましたか?
2 番目の質問: 一方、テキストを p でシフトさせる方法はありますか? p#content に float:none; を追加するか、

一を使用してみました。

タグは無効ではありません。 前に説明した

タグは 2 か 1 かに気づきませんでした。

1:

タグは無効ではありません。前に説明した

タグは

です(以前は2だったのか1だったのか気付きませんでした)。

以上が最初の紹介で、float:left; に関する W3School の例について質問があります。 _html/css_WEB-ITnose コンテンツ、その他の関連コンテンツについては、PHP 中国語 Web サイト (m.sbmmt.com) に注目してください。