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

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

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

给父元素wrapper添加position:absolute后解决问题:
在这里插入图片描述
当然,触发bfc后对后面其他元素造成也会造成一定影响,这个就遇到问题再解决。

猜你喜欢

转载自blog.csdn.net/weixin_42009735/article/details/84873603