作者：广东神秘地址 | 来源：互联网 | 2023-01-16 13:49
我们都知道，在CSS的盒模型中，当子容器设置了margin-top之后，父容器也会受到相应的影响，如下图所示，这是我们部门新来的一个员工写的页面，然后碰到了这个问题：
我们都知道，在CSS的盒模型中，当子容器设置了margin-top之后，父容器也会受到相应的影响，如下图所示，这是我们部门新来的一个员工写的页面，然后碰到了这个问题：
要解决这种情况，通常情况下我们会采用父容器的padding属性来替代子容器的margin属性。那么，有没有别的办法可以解决这个问题呢？
答案是有的！
我们发现此时的父容器并没有使用border属性或padding属性，可是当我们加上
这两个属性中的某一个之后，上面所说的这种现象消失了！！更直接的说起作用的应该是
padding-top或border-top-style 这两个属性。
如上两图所示。当我们使用border或padding中的任意一个属性时，这种现象就消除了。
但是border-top或padding-top宽度必须至少1像素才行。
于是，利用css盒模型的特点，我们可以将父容器的高度减1像素，padding-top加1像素或border-top设置为1像素即可。
补充：上面说的这种解决方案并非最合适，最近看了下BFC相关规范，突然联想到这个问题，原来只需要对外层容器触发BFC布局即可。触发BFC方式有很多，这里最恰当的应该是overflow:hidden了。
京公网安备 11010802041100号