本文介绍了CSS布局中常见的高度塌陷和元素重叠问题，并详细探讨了四种解决方法，包括设置透明边框、内边距、转换元素display属性以及使用overflow属性触发BFC。同时，针对高度塌陷问题，提出了overflow隐藏和利用伪元素清除浮动两种解决方案。
给大家说一下css布局中高度塌陷和重叠问题
我们知道在css中默认的是流体布局，块级元素就是从上到下，行内元素就是从左到右
但是我们在父子嵌套的时候我们会发现个子div设置margin-top父div会跟着一起往下移动，这是我们最头疼的一件事，有的时候也会想不明白为什么子元素动父元素也会跟着动，这就是我们的父子重叠问题，
一旦子元素和父元素重叠，父元素就会跟着子元素一起向下移动，当然我们是为了解决问题，看下面解决办法
解决办法一： 给父元素加一个边框，可以设置为透明色，这样父子就不会重叠了，不重叠子元素就不会影响父元素了 缺点还是会影响父元素的高度
border-top：1px solid rgba（0,0,0,0）
解决方法二：我们的目的是让子元素下移，所以我们可以给父元素加内边距来控制子元素的距顶部的距离 缺点会影响其他子元素的布局
padding-bottom:40px;
解决方法三：将子元素转为行内块这样也可以达到小哥 缺点会影响其他布局
display: inline-block;
解决方法四：溢出不可见触发bfc 缺点溢出部分不可见 或者会出现滚动条
这里我们是触发了bfc，还有好方法看下面
overflow:hidden/scrool/auto; 只要不是visible就可以
下面给大家解决一下高度塌陷问题
<!DOCTYPE html>
<html lang
最低0.47元/天 解锁文章
扫一扫
2518
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
