`overflow: hidden` は ` 内のフロート要素とその後のテキスト配置にどのような影響を与えますか?

CSS オーバーフロー:Float で非表示の説明

質問: オーバーフロー プロパティはテキストの相対的な配置にどのように影響しますかfloat を含む UL にelements?

説明:

デフォルトでは、ul や p などのブロックレベルの要素は親の幅の 100% まで伸びます。指定された例では、ul にはフローティングされた li 要素のみが含まれているため、全幅を維持したまま高さ 0px に折りたたまれます。

その結果、隣接する p 要素がフローティングされた要素の右側に表示されます。

ただし、overflow:hidden が ul に適用されると、新しいブロック フォーマット コンテキスト (BFC) が確立されます。 ul 内の li 要素。これにより、ul の崩壊が防止され、p 要素が強制的に下に押し込まれ、フローティングされた li 要素がクリアされます。

技術詳細:

CSS 仕様による。 、通常のフローでブロックレベルの非置換要素にオーバーフローが表示される場合、それらは標準のブロック要素として動作します。ただし、オーバーフローを非表示の値 (非表示を含む) に設定すると BFC が作成され、動作が異なります。

例:

次のコードを考えてみましょう。

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #dddddd;
  border: 2px solid red;
}

li {
  float: left;
}

a {
  display: block;
  width: 60px;
  background-color: #555;
  color: white;
}

p {
  margin: 0;
  outline: 2px dotted blue;
}

#two {
  clear: both;
  overflow: hidden;
}

なしオーバーフロー:

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>
<p>
  Notice the collapsed ul - no background-color visible, collapsed border and this paragraph treats the lis as regular floats
</p>

オーバーフローあり:

<ul>

ご覧のとおり、overflow:hidden を ul に適用すると、浮動小数点数の li 要素が強制的に次のようになります。 ul 内に含まれ、p 要素をクリアしてページの一番下に押し込みます。

以上が`overflow: hidden` は ` 内のフロート要素とその後のテキスト配置にどのような影響を与えますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。