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;         /*清除这个元素两边的浮动*/
}
相关推荐
拾光拾趣录9 分钟前
CSS常见问题深度解析与解决方案(第三波)
前端·css
就爱瞎逛1 小时前
TailWind CSS Intellisense 插件在VSCode 上不生效
前端·css·vscode·tailwind
柚子8161 小时前
sibling-index:我用这个画时钟表盘
前端·css
孤水寒月15 小时前
基于HTML的悬窗可拖动记事本
前端·css·html
涔溪1 天前
HTML5 实现的圣诞主题网站源码,使用了 HTML5 和 CSS3 技术,界面美观、节日氛围浓厚。
css3·html5·节日
呆呆的心1 天前
前端必学:从盒模型到定位,一篇搞定页面布局核心 🧩
前端·css
AA-代码批发V哥1 天前
CSS之布局详解指南
css
Amy.Wang1 天前
前端如何实现电子签名
前端·javascript·html5
拾光拾趣录1 天前
CSS 深入解析:提升网页样式技巧与常见问题解决方案
前端·css
FogLetter1 天前
图片懒加载:让网页飞起来的魔法技巧 ✨
前端·javascript·css