HTML と CSS のフローティング要素: ページ フローにどのような影響を与えるのでしょうか?

フローティング要素: フローの移動

HTML と CSS では、フローティング要素はレイアウトとデザインにおける重要な概念です。ただし、彼らの行動を理解するのは少し難しいかもしれません。フローティング要素の世界に飛び込んで、いくつかの一般的な質問を検討してみましょう。

「フローの一部がまだ残っている」

フローティング要素は、フローから削除されるとよく​​説明されます。ページの通常の流れでありながら、まだその一部として残っています。この概念は、特にフローティング要素が他の要素と重なる可能性があることを観察した場合、最初は混乱する可能性があります。

これを理解するための鍵は、フローティング要素がテキストとインライン要素のフローに影響を与え続けるということです。たとえそれらがページの物理的なレイアウトから取り出されたとしても、テキストがどのように折り返されるかには依然として影響します。これが、これらが「まだフローの一部として残っている」とみなされる理由です。

たとえば、HTML および CSS コードの例を考えてみましょう。

<code class="html"><section>
  <div class="left">Left</div>
  <div class="left_second">Middle</div>
  <div class="right">Right</div>
</section></code>

<code class="css">section {
  border: 1px solid blue;
}

div {
  margin: 5px;
  width: 200px;
  height: 50px;
}

.left {
  float: left;
  background: pink;
}

.left_second {
  background: blue;
}

.right {
  float: right;
  background: cyan;
}</code>

フロートを追加するとき： 左;プロパティを最初の div .left に追加すると、コンテナーの左側に移動し、テキストがコンテナーの周りを回り込むことができるようになります。 2 番目と 3 番目の div は、最初の div に対して通常の位置に配置されます。これは、最初の div がフローティングであっても、その周囲のテキストの流れに依然として影響を及ぼしていることを示しています。

包含ブロックの外側

それでは、なぜ3 番目の div は、それを含むブロックの外側にあります。コード例では、含まれるブロックは

です。要素。 3 番目の div .right には float: right; があるため、包含ブロックの右端に移動します。

包含ブロックに浮動要素を収容するのに十分な幅がない場合、外側にはみ出します。ブロックの。この場合、包含ブロックは 3 番目の div に対して狭すぎるため、オーバーフローしてセクションの外に表示されます。

これを防ぐには、包含ブロックの幅を増やすか、clearfix テクニックを使用して、浮遊要素をクリアします。 clearfix テクニックには、clear: Both; を使用して非表示要素を追加することが含まれます。包含ブロックにすべての浮動要素を強制的に含めます。

以上がHTML と CSS のフローティング要素: ページ フローにどのような影響を与えるのでしょうか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。