css:子元素设置margin-top父元素会跟着移动(margin塌陷)

代码如下:
css:子元素设置margin-top父元素会跟着移动(margin塌陷)_第1张图片
效果如图:
在这里插入图片描述
这种情况成为margin塌陷:父子元素的margin-top属性,会共用值最大的那个。所以父元素公用了子元素的margin-top值,自然也就跟着移动了。
解决方法:bfc
触发bfc的方法有以下几种:

		position:absolute;
		display:inline-block;
		float:left/right;
		overflow:hidden;(溢出的东西隐藏)

给父元素wrapper添加position:absolute后解决问题:
css:子元素设置margin-top父元素会跟着移动(margin塌陷)_第2张图片
当然,触发bfc后对后面其他元素造成也会造成一定影响,这个就遇到问题再解决。

你可能感兴趣的:(css:子元素设置margin-top父元素会跟着移动(margin塌陷))