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;         /*清除这个元素两边的浮动*/
}
相关推荐
sunbyte8 分钟前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | GoodCheapFast(Good - Cheap - Fast三选二开关)
前端·javascript·css·vue.js·tailwindcss
像风一样自由202013 小时前
原生前端JavaScript/CSS与现代框架(Vue、React)的联系与区别(详细版)
前端·javascript·css
paid槮13 小时前
HTML5如何创建容器
前端·html·html5
拾光拾趣录14 小时前
HTML行内元素与块级元素
前端·css·html
奶丝兔蜜柚16 小时前
物理像素&逻辑像素&DPR
css
小胖同学~17 小时前
H5新增属性
html5
还是大剑师兰特1 天前
CSS面试题及详细答案140道之(41-60)
前端·css·大剑师·css面试·css示例
精神小伙2号1 天前
css position
前端·css·html
PanZonghui1 天前
移动端适配全景指南:从原理到实战的完整解决方案
前端·javascript·css
PanZonghui1 天前
告别布局困惑:彻底搞懂CSS标准盒模型与IE盒模型
前端·css