2

W3CMDNから、ブロック フォーマット コンテキストは次のいずれかによって作成されることがわかっています。

  • ルート要素またはそれを含むもの
  • floats (float が none でない要素)
  • 絶対配置要素 (位置が絶対または固定の要素)
  • インラインブロック (要素にdisplay: inline-block)
  • テーブル セル ( display: table-cellHTML テーブル セルのデフォルトである を含む要素)
  • display: table-captionテーブル キャプション ( HTML テーブル キャプションのデフォルトである を含む要素)
  • オーバーフローが 以外の値を持つ要素visible
  • フレックスボックス (display: flexまたはを含む要素inline-flex)

しかし、次のコードに関して質問があります。

<div style='background:grey;border:black 1px dotted;width:400px'>
    <div style='margin:20px;background:red;'>the parent create a bfc</div>
</div>
<div style='background:grey;width:400px'>
    <div style='margin:20px;background:red;'>why?</div>
</div>

最初の div 要素は BFC を作成しますが、これらの唯一の違いは、最初の div に境界線があることです。なんで?

4

2 に答える 2

2

2 つの要素のどちらもdiv独自の BFC を作成していません。あなたのコードには、最初の要素が独自の BFC を作成していることを示唆するものはまったくありdivません — 境界線だけを持っていても、要素が独自の BFC を確立することはありません。

ボーダーがしていることは、マージンの崩壊をブロックすることです。これは、子要素の余白が親要素の余白と結合しないことを意味します。それらは親要素ボックス内に制約されています。

于 2013-05-05T05:30:36.077 に答える
1

私は@BoltClockに完全に同意します

ボーダーがしていることは、マージンの崩壊をブロックすることです。これは、子要素の余白が親要素の余白と結合しないことを意味します。それらは親要素ボックス内に制約されています。

しかし、あなたが望むようにその問題を解決したい場合は、ここで解決策を提供します. overflow: hidden;マージンを折りたたまない2番目のdivに追加するだけです。

<div style='background:grey;border:black 1px dotted;width:400px'>
    <div style='margin:20px;background:red;'>the parent create a bfc</div>
</div>
<div style='background:grey;width:400px; overflow: hidden;'>
    <div style='margin:20px;background:red;'>why?</div>
</div>
于 2013-05-05T06:04:33.907 に答える