<!DOCTYPE html>
<html lang="en">
<head>
<title>test</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.a{
height:48px;
background: #eee;
}
.b{
height:520px;
background: #ff4949;
}
.c{
width:90%;
height:300px;
margin:20px auto;
background: #fff;
}
</style>
</head>
<body>
<p class="a"></p>
<p class="b">
<p class="c"></p>
</p>
</body>
</html>
p.c 不是应该被红色环绕吗？烦请那个老哥解释下。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
BFC では、2 つの隣接 (兄弟または親子) があり、境界線やパディングがないため、要素の margin-top とその最初の通常のドキュメント フロー子要素の margin-top によって margin-collapse (外側) が生成されます。折り目からのマージン）。
b に境界線を追加します。
またはパディングを追加します。
は削除できます。
または、
overflow: hidden;を b に追加できます。次を参照してください: BFC とマージン崩壊の詳細な理解
.b に overflow: hidden; を追加するだけです。
オーバーフローでは表示以外の値 (hidden、auto、scroll) が使用されるため、BFC がトリガーされます。
BFCとは何ですか?
ブロック フォーマット コンテキスト (ブロック レベル フォーマット コンテキスト)
BFC を持つ要素は、コンテナ内の要素は外側の要素のレイアウトに影響を与えず、独立したコンテナとみなすことができます。BFC には通常のコンテナがあります。浮動要素を含める機能など、浮動要素を含めることができるいくつかの機能があります。前述の 2 番目のタイプの float クリア メソッド (オーバーフロー メソッドなど) は、浮動要素の親要素の BFC をトリガーします。要素が浮いているため、高さの崩壊の問題が防止されます。
overflow: hidden; この文を p.b. に追加します。
「子要素のマージンが親要素に影響する」を検索
これはオーバーラップマージンと呼ばれ、子要素のマージンは親要素に影響し、2 つのマージンが大きいほどコンテナ全体のマージンも大きくなります。現時点では、BFC をトリガーすることを選択する必要があります。BFC がトリガーされる状況は次のとおりです。
ルート要素
float 属性は none ではありません。
位置は絶対または固定です。
表示はインラインブロック、テーブルセル、テーブルキャプション、フレックス、インラインフレックスです。
オーバーフローは表示されません。
解決策: