overflow:hidden——溢出隐藏，解除塌陷，清除浮动

最新推荐文章于 2023-10-19 11:22:50 发布

WGP鹏灬

最新推荐文章于 2023-10-19 11:22:50 发布

阅读量1.2k

点赞数

分类专栏：前端开发学习笔记文章标签： css html5 html

本文链接：https://blog.csdn.net/qq_43477251/article/details/120263013

版权

前端开发学习笔记专栏收录该内容

14 篇文章 1 订阅

订阅专栏

一、溢出隐藏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .box {
            width: 300px;
            height: 100px;
            background-color: greenyellow;
            /* 溢出隐藏 */
            overflow: hidden;
        }
        .demo1 {
            width: 100px;
            height: 100px;
            background-color: turquoise;
        }
        .demo2 {
            width: 100px;
            height: 100px;
            background-color: violet;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="demo1"></div>
        <div class="demo2"></div>
    </div>
</body>
</html>

如果父盒子没有设置固定高度或宽度时，子盒子会将父盒子的宽或高自动撑开；如果父盒子有固定高度或宽度时，且子盒子的高度或宽度大于父盒子，就会发生溢出。

1、父盒子没设置固定宽高

在这里插入图片描述

2、父盒子固定宽高，且大于子盒子

父盒子宽高各300px
在这里插入图片描述

3、父盒子固定宽高，且小于子盒子

（1）溢出

父盒子宽300px，高100px
在这里插入图片描述

（2）溢出隐藏

在这里插入图片描述

二、解除塌陷

父盒子高度不固定，子盒子添加margin-top:60px，我们发现只有第一个子盒子发生塌陷

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .box {
            /* width: 300px; */
            /* height: 100px; */
            background-color: greenyellow;
            /* overflow: hidden; */
        }
        .demo1 {
            width: 100px;
            height: 100px;
            margin-top: 60px;
            background-color: turquoise;
        }
        .demo2 {
            width: 100px;
            height: 100px;
            margin-top: 60px;
            background-color: violet;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="demo1"></div>
        <div class="demo2"></div>
    </div>
</body>
</html>

在这里插入图片描述

1、父盒子添加overflow:hidden解除塌陷

在这里插入图片描述

2、子盒子添加浮动避免塌陷

子盒子添加float:left，为了看的更明显，父盒子设置width: 300px;height: 100px;
在这里插入图片描述

三、清除浮动

不设置父盒子的高度，高度随内容增加自适应高度，子盒子都使用浮动，子元素会脱离标准流，不占位，父级元素检测不到子元素的高度，父级元素高度为0。我们会发现父盒子背景色看不到，开发工具中显示父盒子高度为0。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .box {
            /* width: 300px; */
            /* height: 100px; */
            background-color: greenyellow;
            /* overflow: hidden; */
        }
        .demo1 {
            float: left;
            width: 100px;
            height: 100px;
            margin-top: 60px;
            background-color: turquoise;
        }
        .demo2 {
            float: left;
            width: 100px;
            height: 100px;
            margin-top: 60px;
            background-color: violet;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="demo1"></div>
        <div class="demo2"></div>
    </div>
</body>
</html>

在这里插入图片描述

1、overflow:hidden清除浮动

在父盒子中添加overflow:hidden，父级的高度就随子盒子及子盒子内容的高度而自适应。
在这里插入图片描述

2、父盒子添加浮动

父盒子添加float: left;
在这里插入图片描述

WGP鹏灬

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
overflow:hidden——溢出隐藏，解除塌陷，清除浮动

一、溢出隐藏<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title
复制链接

扫一扫