CSS18：overflow及父级边框塌陷问题

最新推荐文章于 2023-04-06 18:49:56 发布

一个优雅的搬砖人

最新推荐文章于 2023-04-06 18:49:56 发布

阅读量646

点赞数

分类专栏： # CSS 文章标签： html 前端 javascript

本文链接：https://blog.csdn.net/weixin_48306950/article/details/123137501

版权

CSS 专栏收录该内容

24 篇文章 1 订阅

订阅专栏

父级边框塌陷问题

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        #father {
            border: 2px dashed slateblue;
        }
        #img {
            border: 1px dashed salmon;
            float: left;
        }
        span {
            border: 1px dashed #25e10f;
            float: right;
            clear: both;
        }
        #img1 {
            border: 1px dashed #64c2d3;
            float: left;
        }
        #img2 {
            border: 1px dashed #ff7500;
            float: right;
        }
    </style>
</head>
<body>
<div id="father">
    <img src="image/img.png" alt="img" id="img">
    <img src="image/img_1.png" alt="img1" id="img1">
    <img src="image/img_2.png" alt="img2" id="img2">
    <span>有信念不一定会成功，没信念一定会失败。</span>
</div>
</body>
</html>

可以看到父级边框已经塌陷了（红框圈住的部分）

解决方案

1、给父级边框增加高度

特点：简单，但是元素设有了固定的高度，就会被限制

#father {
    border: 2px dashed slateblue;
    height: 800px;
}

2、浮动元素后面增加一个空的 div 元素，并声明 clear: both; 清除浮动样式

特点：简单，但是在代码中应该尽量避免空 div

<div class="clear"></div>

.clear {
    clear: both;
    margin: 0;
    padding: 0;
}

3、给父级边框添加一个 overflow: hidden;

特点：简单，但是不适用需要下拉、一些不能被切除的场景，避免使用

#father {
    border: 2px dashed slateblue;
    overflow: hidden;
}

4、在父类边框添加一个伪类: after

特点：是市面上比较推荐的处理方式，其实和添加一个空 div 原理相同，但是避免了手动添加，从程序的角度解决问题，推荐使用

#father:after {
    /* 添加一个空内容的块级元素，并且清空浮动 */
    content: '';
    display: block;
    clear: both;
}

溢出 overflow

overflow 属性规定当内容溢出元素框时发生的事情。

语法

/* 默认值。内容不会被修剪，会呈现在元素框之外 */
overflow: visible;

/* 内容会被修剪，并且其余内容不可见 */
overflow: hidden;

/* 内容会被修剪，浏览器会显示滚动条以便查看其余内容 */
overflow: scroll;

/* 由浏览器定夺，如果内容被修剪，就会显示滚动条 */
overflow: auto;

/* 规定从父元素继承overflow属性的值 */
overflow: inherit;

示例

p {
     width: 12em;
     height: 6em;
     border: dotted;
     overflow: visible; /* 内容不会被修剪 */
}

p { overflow: hidden; /* 不显示滚动条 */  }

p { overflow: scroll; /* 始终显示滚动条 */  }

p { overflow: auto; /* 必要时显示滚动条 */  }

一个优雅的搬砖人

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS18：overflow及父级边框塌陷问题

父级边框塌陷问题示例代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> #father { border: 2px dashed slateblue; } #img {
复制链接

扫一扫

专栏目录