A RetroSearch Logo

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Search Query:

Showing content from https://developer.cdn.mozilla.net/ja/docs/Web/CSS/CSS_display/Block_formatting_context below:

ブãƒãƒƒã‚¯æ•´å½¢ã‚³ãƒ³ãƒ†ã‚スト - CSS: カスケーディングスタイルシート | MDN

以下の例では、borderが適用された <div> の中に浮動ボックスがあります。その <div> のコンテンツは浮動ボックスの横に並んだ状態になっています。浮動ボックスのコンテンツは横に並んだコンテンツよりも高さがあるため、<div> の境界線が浮動ボックスを貫通してしまいます。フロー内とフローの外のガイドで説明しているように、浮動ボックスがフローから外れたので、 <div> の background と border には浮動ボックスはなく、コンテンツだけが保持されています。

overflow: auto の使用

overflow: auto を設定したり、初期値である overflow: visible 以外の値を設定すると、浮動ボックスを含む新しい BFC を作成することができます。これで、<div> がレイアウトの中のミニレイアウトになります。子要素はすべてこの中に含まれます。

新しい BFC を作成するために overflow を使用することの問題点は、overflow プロパティが、はみ出したコンテンツをどのように処理したいかをブラウザーに指示するためのものであることです。このプロパティを純粋に BFC を作成するために使用すると、不要なスクロールバーやクリップされたドシャドウが返されることがあるようです。さらに、将来的に開発者が読解できない可能性もあります。なぜそのために overflow を使用したのかがわからないかもしれないからです。もし overflow を使用するのであれば、コードにコメントをつけて説明するとよいでしょう。

display: flow-root の使用

より新しい値の display を使用すると、他の問題となりうる副作用なしに、新しいBFCを作成することができます。コンテナーブロックに display: flow-root を使用すると、新しい BFC が作成されます。

display: flow-root; を <div> に指定すると、コンテナーの中にあるすべてのものが、そのコンテナーのブロック整形コンテキストに参加し、浮動ボックスが要素の下部からはみ出ることはありません。

flow-root という値は、root 要素（ブラウザーでは <html> 要素）のように、その中にフローレイアウトのための新しいコンテキストを作成することを理解すれば、理にかなったものです。

これは、 <button> 要素とボタン型の <input> 要素の既定のレンダリングです。すなわち、ボタンは、 display の値が新しい BFC を自動的に作成しない値に設定されていない限り、新しい BFC を作成します。

HTML 
<section>
  <div class="box">
    <div class="float">浮動ボックスです。</div>
    <p>コンテナー内のコンテンツです。</p>
  </div>
</section>
<section>
  <div class="box" style="overflow:auto">
    <div class="float">浮動ボックスです。</div>
    <p><code>overflow:auto</code> のコンテナー内のコンテンツです。</p>
  </div>
</section>
<section>
  <div class="box" style="display:flow-root">
    <div class="float">浮動ボックスです。</div>
    <p><code>display:flow-root</code> のコンテナー内のコンテンツです。</p>
  </div>
</section>
CSS 
section {
  height: 150px;
}
.box {
  background-color: rgb(224 206 247);
  border: 5px solid rebeccapurple;
}
.box[style] {
  background-color: aliceblue;
  border: 5px solid steelblue;
}
.float {
  float: left;
  width: 200px;
  height: 100px;
  background-color: rgb(255 255 255 / 50%);
  border: 1px solid black;
  padding: 10px;
}

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4