How does the CSS Block Formatting Context work?への回答で 著者は次のように述べています。
ブロックの書式設定コンテキストでは、各ボックスの外側の左端が含まれているブロックの左端に接触します (右から左への書式設定の場合、右端が接触します)。
上記の行の意味:
ボックスは長方形のみで、不規則な形状ではないため、2 つのフロート間 (または 1 つのフロートの横であっても) の新しいブロック フォーマット コンテキストは、隣接するサイド フロートに回り込まないことを意味します。内側の子ボックスは、親の左 (RTL では右) のエッジに触れるまでしか拡張できません。
これを確認したかったので、次のJS Bin テスト ケースを作成しました。
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div class="table-cell">
<div class="negative-margin">
</div>
</div>
</body>
</html>
CSS
body {
padding: 50px;
}
.table-cell {
display: table-cell;
border: 1px solid black;
width: 200px;
height: 200px;
}
.negative-margin {
border: 1px solid blue;
width: 100px;
height: 100px;
background: #666;
margin-left: -20px;
}
ただし、ご覧のとおり、含まれている要素はコンテナーの左端を横切っています。
誰かがここで何が欠けているのか説明してもらえますか?
更新 1
一部の人々は、これはマイナスのマージンが原因で発生していると述べています。前述の質問への回答に従うことで、負のマージンが含まれている要素をコンテナーの外に移動しないことを期待していました。参照する：
フロート、絶対配置要素、ブロック ボックスではないブロック コンテナ (インライン ブロック、テーブル セル、テーブル キャプションなど)、および「可視」以外の「オーバーフロー」を持つブロック ボックス (その値が伝播された場合を除く)ビューポートに) コンテンツの新しいブロック フォーマット コンテキストを確立します。
そして.table-cell要素はこの定義を満たしています。では、なぜ.negative-margin親の国境を越えるのでしょうか?