有关于overflow:hidden之后布局时反而就可见了的问题

凌传洲 发布于 2015/07/12 15:41
阅读 1K+
收藏 0
CSS

【Gopher China万字分享】华为云的Go语言云原生实战经验!>>>

div class=mainbody,设置了overflow:hidden之后布局时就可见了,以下是overflow的属性值:

visible 默认值。内容不会被修剪,会呈现在元素框之外。

hidden 内容会被修剪,并且其余内容是不可见的。

scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。

inherit 规定应该从父元素继承 overflow 属性的值。

有点不理解hidden属性值,明明是隐藏,怎么一设置反而可见了。

以下是我敲的代码:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        *{
            margin:0;
            padding:0;
        }
        #wrap{
            background: #badbdb;
            margin:0 auto;
            width:960px;
            height:100px;
        }
        #header{
            background-color: #bdbd69;
            width:100%;
            height:100px;
            margin-top: 100;
        }
        #mainbody{
            background-color: #65bda1;
            width:100%;
            overflow: auto;
        }
        #footer{
            background-color: #7f9fbd;
            width:100%;
        }
        .left{
            width:800px;
            height:200px;
            background-color: #eb71da;
            float:left;


        }
        .right{
            width:140px;
            height:500px;
            background-color: #d0f986;
            float:right;
        }


    </style>
</head>
<body>
<div id="wrap">
    <div id="header">头部</div>
    <div id="mainbody">
        <div class="left">左</div>
        <div class="right">右</div>
    </div>
    <div id="footer">版权部分</div>
</div>
</body>
</html>
加载中
0
当C罗爱上梅西
当C罗爱上梅西
overflow:hidden; 不是让元素不可见,而是让元素超出规定宽度和高度时不可见也不出现滚动条。
0
欣儿
欣儿
隐藏?display none
0
bigTreee
bigTreee

不是一设置反而可见了

而是你设置了之后, overflow:hidden 属性清除了left 和 right的 float属性,

所以footer就正常显示在left 和rigth下面,和 header遥相呼应。

默认的visible是不对超出元素进行处理。

在mainbody 和 left 中间加一些字符(文字,要超出一行的宽度)看看visible和hidden的区别





@红薯 从周六开始,我这边就不能添加代码了,图片也不能上传,我用的是chrome浏览器,43.0.2357.130 (64-bit),没更新过,

试过,IE可以


凌传洲
谢了!
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部