给子盒子加margin-top会把父盒子带下来,造成外边距塌陷的解决办法

.father{ 
		width: 300px; height: 300px; 
		background-color: pink; 
		}
.son{ 
		width: 200px; height: 200px; 
		background-color: orange; 
		margin-top:10px
		}

给子盒子添加margin-top:10px属性后,会作用于父盒子,连同父盒子一起下移,
造成这个现象的原因是:
1.当一个元素包含在另一个元素中时(假设没有填充或边框将边界分隔开),它们的顶和/或底边界会发生叠加。
2.只有普通文档流中块框的垂直边界才会发生边界叠加。行内框、浮动框或绝对定位框之间的边界不会叠加。

解决办法

1:为父元素设置border(会有边框)

2:为父元素设置padding(会导致里面的子盒子不居中)

3:为父元素添加overflow:hidden;样式

4:为父元素或者子元素声明浮动

5:为父元素或者子元素声明绝对定位

你可能感兴趣的:(css)