<!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 不是应该被红色环绕吗？烦请那个老哥解释下。
因為在BFC中，兩相鄰（兄弟或父子）、沒有邊框且沒有padding，元素的margin-top與其第一個常規文檔流的子元素的margin-top，會產生marign-collapse（外側距折疊）。
你給b加邊框，
或加padding，
都能消除。
或者，你可以加b
overflow: hidden;。可以參考：深入理解BFC和Margin Collapse
你在.b中加入個overflow: hidden;就可以了。
因為overflow 使用除了 visible 以外的值（hidden，auto，scroll）會觸發BFC。
什麼是BFC？
Block Formatting Contexts (區塊級格式化上下文)
具有BFC 的元素可以看作是隔離了的獨立容器，容器裡面的元素不會在佈局上影響到外面的元素，並且BFC 具有普通容器沒有的一些特性，例如可以包含浮動元素，上文中的第二類清除浮動的方法（如overflow 方法）就是觸發了浮動元素的父元素的BFC ，使到它可以包含浮動元素，從而防止出現高度塌陷的問題。
overflow: hidden; 你把這句話加到 p.b 上。
搜尋「子元素margin影響父元素」
這個叫外邊距重疊吧,子級元素的外邊距會影響父級元素,並且這兩的外邊距大整個容器的外邊距就以大的為準。這時候應該選擇觸發BFC,BFC是什麼前面幾位說的很清楚了,觸發BFC的情況有:
根元素
float屬性不為none；
position為absolute或fixed；
display為inline-block, table-cell, table-caption, flex, inline-flex；
overflow不為visible；
解決方法：