对父元素中子元素设置margin-top时，父元素也会出现相同的margin值. 父元素的第一个子元素的上边距margin-top如果碰不到有效的border或者padding,会一直向上找自己的“父元素”，直到body，可以给父元素设置有效的margin-top，或padding-top来解决父元素向下偏移的影响。 真正的原因是BFC。BFC：它是一个独立的渲染区域，只有块盒子参与。如何创建呢？浮动元素，绝对定位元素，元素属性为inline-block，table-cption，table-cell以及overflow属性不为visible的元素将会创建一个新的块级格式上下文。 BFC的特点：一是，在一个BFC中，盒子从顶端开始垂直一个接着一个地排列。两个相邻盒子之间的垂直间距由margin属性决定。在同一个BFC中，两个相邻的盒子之间垂直方向上外边距会叠加。二是，在图个BFC中，每一个盒子的左外边界会紧贴这容器的左边，即使存在浮动元素也是如此。 BFC的用处：避免垂直外边距叠加，清除浮动，实现自适应布局。