<!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><div class="a"></div><div class="b"> <div class="c"></div></div></body></html>
div.c 不是应该被红色环绕吗?烦请那个老哥解释下。
解决方案
因为在BFC中,两相邻(兄弟或父子)、没有边框且没有padding,元素的margin-top与其第一个常规文档流的子元素的margin-top,会产生marign-collapse(外边距折叠)。
你给b加边框,
border: 1px solid transparent;
或者加padding,
padding: 1px 0;
都能消除。
或者,你可以给b加 overflow: hidden;
。