「overflow: hidden」はフロート要素と後続のコンテンツにどのような影響を与えますか?

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

オーバーフロー プロパティの影響を理解する

CSS のオーバーフロー プロパティは処理を指定します含まれる要素の境界を超えるコンテンツ。フローティング子要素を持つ要素に適用すると、新しいブロック書式設定コンテキストが確立されます。

テキストの配置への影響

次のコード スニペットを検討してください:

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

li {
  float: left;
}

a {
  display: block;
  width: 60px;
  background-color: #dddddd;
  padding: 8px;
}

デフォルトでは、ul はブロックレベルであるため、ul の後に現れる段落 (p) 要素は一番下にプッシュされます。 要素。ただし、オーバーフローが ul で非表示に設定されている場合、次のことが発生します:

• ul は、その float 子要素 (lis) を含むブロック フォーマット コンテキストを確立します。
• ul が「再表示」され、高さ 0px に折りたたまれなくなりました。
• 段落 (p) は、段落の最後にプッシュされます。 ul のコンテンツ。float 要素の後に表示されます。

これは、overflow:hidden が、ul がその子要素を含むブロックレベル要素のように機能する新しいフォーマット環境を作成するためです。

技術説明

CSSによる仕様:

• オーバーフローが '可視' の場合: 「置換されていないブロックレベル要素は、その float プロパティに関係なく、新しいブロック フォーマット コンテキストを確立しません。」 ([§10.6.3](https://www.w3.org/TR/CSS2/visudet.html#block-level))
• オーバーフローが非表示に設定されている場合' value: "ブロック フォーマット コンテキストは、ルート要素がインライン レベルまたはアトミック インライン レベル要素の子リストのルートであるサブツリーのルート要素によって確立されます。要素がフローティングであるか、絶対に配置されているか、または 'visible' 以外の 'overflow' があります。 ([§10.6.7](https://www.w3.org/TR/CSS21/visudet.html#containing-block))

ul に overflow:hidden を設定すると、新しいブロックが作成されます書式設定コンテキストをブロックし、その子要素を含めて段落を一番下に押し込みます。

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