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;         /*清除这个元素两边的浮动*/
}
相关推荐
低代码布道师1 分钟前
CSS的三个重点
前端·css
黎金安12 小时前
前端第二次作业
前端·css·css3
阳光开朗大男孩 = ̄ω ̄=13 小时前
CSS——选择器、PxCook软件、盒子模型
前端·javascript·css
小马哥编程15 小时前
【前端基础】CSS基础
前端·css
Justinc.16 小时前
CSS3新增边框属性(五)
前端·css·css3
fruge16 小时前
纯css制作声波扩散动画、js+css3波纹催眠动画特效、【css3动画】圆波扩散效果、雷达光波效果完整代码
javascript·css·css3
As977_16 小时前
前端学习Day12 CSS盒子的定位(相对定位篇“附练习”)
前端·css·学习
susu108301891116 小时前
vue3 css的样式如果background没有,如何覆盖有background的样式
前端·css
我要洋人死19 小时前
导航栏及下拉菜单的实现
前端·css·css3
小白白一枚1111 天前
css实现div被图片撑开
前端·css