W3CとMDNから、ブロック フォーマット コンテキストは次のいずれかによって作成されることがわかっています。
- ルート要素またはそれを含むもの
- floats (float が none でない要素)
- 絶対配置要素 (位置が絶対または固定の要素)
- インラインブロック (要素に
display: inline-block
) - テーブル セル (
display: table-cell
HTML テーブル セルのデフォルトである を含む要素) 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 に境界線があることです。なんで?