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;         /*清除这个元素两边的浮动*/
}
相关推荐
到底起什么网名才能不重名8 小时前
使用各种CSS美化网页
前端·css·vscode·bootstrap·html
sunbyte9 小时前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | ContentPlaceholder(背景占位)
前端·javascript·css·vue.js·tailwindcss
码哥DFS12 小时前
Flex布局原理
前端·css·css3
长路 ㅤ   13 小时前
前端技术博客汇总文档
javascript·vue.js·css3·html5·前端技术
张晓~1833994812115 小时前
数字人源码部署流程分享--- PC+小程序融合方案
javascript·小程序·矩阵·aigc·文心一言·html5
小飞悟15 小时前
别再只会用 px 了!移动端适配必须掌握的 CSS 单位
前端·css·设计
xhload3d15 小时前
智慧航天运载体系全生命周期监测 | 图扑数字孪生
物联网·3d·智慧城市·html5·webgl·数字孪生·可视化·工业互联网·三维建模·工控·航空航天·火箭升空·智慧航空·智慧航天·火箭发射·火箭回收
晴殇i17 小时前
前端内容保护:如何有效防止用户复制页面内容?
前端·javascript·css
Liudef061 天前
2048小游戏实现
javascript·css·css3
小桥风满袖1 天前
Three.js-硬要自学系列38之专项学习缓冲几何体
前端·css·three.js