浮动清除方式五之overflow:hidden

最新推荐文章于 2022-09-29 10:42:32 发布

407指导员

最新推荐文章于 2022-09-29 10:42:32 发布

阅读量579

点赞数

分类专栏： CSS3 文章标签： css

本文链接：https://blog.csdn.net/LIUCHUANQI12345/article/details/109684700

版权

CSS3 专栏收录该内容

77 篇文章 0 订阅

订阅专栏

浮动清除方式五

overflow 属性

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

可能的值

值	描述
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>清除浮动方式五</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 100px;
            height: 100px;
            background-color: red;
            overflow: hidden;
        }
    </style>
</head>
<body>
<div>凌兵斗者皆阵列在前凌兵斗者皆阵列在前凌兵斗者皆阵列在前凌兵斗者皆阵列在前凌兵斗者皆阵列在前凌兵斗者皆阵列在前凌兵斗者皆阵列在前凌兵斗者皆阵列在前凌兵斗者皆阵列在前凌兵斗者皆阵列在前凌兵斗者皆阵列在前凌兵斗者皆阵列在前</div>
</body>
</html>

在这里插入图片描述

加上 overflow: hidden;后

在这里插入图片描述

清除浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>79-清除浮动方式五</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box1{
            background-color: red;
        }
        .box2{
            background-color: green;

        }
        .box1 p{
            width: 100px;
            background-color: blue;
        }
        .box2 p{
            width: 100px;
            background-color: yellow;

        }
        p{
            float: left;
        }


    </style>
</head>
<body>
<div class="box1">
    <p>我是文字1</p>
    <p>我是文字1</p>
    <p>我是文字1</p>

</div>

<div class="box2">
    <p>我是文字2</p>
    <p>我是文字2</p>
    <p>我是文字2</p>
</div>
</body>
</html>

在这里插入图片描述

在box1中添加overflow: hidden;

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GoC0igXM-1605282745111)(image-20201113234709982.png)]

*zoom:1;

注意点：

1.在ie5里需要加入以上代码才可以生效。

2.如果两个盒子是嵌套关系，而外边盒子没有边框，如果给内部盒子设置margin-top，外边盒子也会被顶下来，在外边盒子中设置overflow: hidden;就不会被顶下来了。

407指导员

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
浮动清除方式五之overflow:hidden

浮动清除方式五overflow 属性overflow 属性规定当内容溢出元素框时发生的事情。可能的值值描述visible默认值。内容不会被修剪，会呈现在元素框之外。hidden内容会被修剪，并且其余内容是不可见的。scroll内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。auto如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。inherit规定应该从父元素继承 overflow 属性的值。<!DOCTYPE html
复制链接

扫一扫

专栏目录