overflow：hidden 取消塌陷
来源：2-3 BFC规范和浏览器差异
慕移动4506339
2021-11-01 22:43:02
本节视频课程中演示的overflow:hidden 取消塌陷功能 没有看明白
加overflow:hidden 前后的两个黄色盒子有变化吗？没加的时候两个盒子是垂直塌陷的，加了后还是垂直塌陷的啊？ 还是我理解的塌陷的意思不对，怎么看是否塌陷？
写回答
1回答
-
好帮手慕小李
2021-11-02
同学你好，如两个垂直的p标签都设置margin为100px的时候如下图：
上面的p标签margin-bottom是100px。
下面的p标签margin-top是100px。
咦~这两个盒子的margin都是100px，我们正常理解二者之间的间距不应该是100+100 = 200px么？但是并不是这样，这里两个盒子的margin距离依然是100px，这就叫做margin塌陷。
那么怎么解决margin塌陷的问题呢？如下图：
这时候给两对p标签都包裹个父级div，然后给父级div设置css，overflow:hidden;的样式，我们再来看效果：
上面的p标签margin-bottom是100px。
下面的p标签margin-top是100px。
在父级div的overflow:hidden;的作用下，两个元素的margin居然不塌陷了，如下图。
祝学习愉快~
0
相似问题