CSS防止父级边框塌陷的四种方法

本文主要是介绍CSS防止父级边框塌陷的四种方法，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

1.推荐：加空div

因为父容器只设置了宽度，没设置高度，里面再加一个空盒子也是这样，这个空盒子就会撑满父容器

<div style="clear:both;"></div>

2.给父容器设置高度：

缺点：得来回设置父容器高度

3.overflow：溢出处理

visible：默认值。内容不会被修剪，会呈现在盒子之外

hidden：内容会被修剪，并且其余内容是不可见的

overfl：hidden

scroll：内容会被修剪，但是浏览器会显示滚动条以便查看其余内容

auto：如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容

4.推荐：父级添加伪类after

也就相当于加一个空盒子，但是这个没有冗余代码

xxx:after{content: '';          /*在clear类后面添加内容为空*/display: block;      /*把添加的内容转化为块元素*/clear: both;         /*清除这个元素两边的浮动*/
}

这篇关于CSS防止父级边框塌陷的四种方法的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---