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;         /*清除这个元素两边的浮动*/
}
相关推荐
lichenyang4532 小时前
css模块化以及rem布局
前端·javascript·css
棉花糖超人2 小时前
【从0-1的CSS】第3篇:盒子模型与弹性布局
前端·css·html
Sally璐璐11 小时前
零基础学HTML和CSS:网页设计入门
前端·css
老虎062711 小时前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
三水气象台11 小时前
用户中心Vue3网页开发(1.0版)
javascript·css·vue.js·typescript·前端框架·html·anti-design-vue
灿灿1213811 小时前
CSS 文字浮雕效果:巧用 text-shadow 实现 3D 立体文字
前端·css
尘心cx12 小时前
前端-CSS-day1
前端·css
全宝13 小时前
🎨前端实现文字渐变的三种方式
前端·javascript·css
没有钱的钱仔13 小时前
STM32低功耗模式全面指南
css·stm32·css3
拾光拾趣录16 小时前
CSS常见问题深度解析与解决方案(第三波)
前端·css