[已解决]overflow:hidden的小问题

0714 · 发表于 2020-2-3 21:06:28

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>CSS</title>
        <style>

            *
            {
                box-sizing: border-box;
            }
            body
            {
                margin: 0;
            }
            .header
            {
                background-color: #f1f1f1;
                padding: 20px;
                text-align: center;
            }
            .top
            {
                overflow: hidden;   /*如果我把overflow:hidden删掉*/
                background-color: #333;
            }
            .top a
            {
                float: left;
                display: block;
                color: #f2f2f2;
                text-align: center;
                padding: 14px 16px;
                text-decoration: none;
            }

            .top a:hover
            {
                background-color: #ddd;
                color: black;
            }
        </style>
    </head>
    <body>
        <div class="header">
            <h1>头部区域</h1>
        </div>

        <div class="top">
            <a href="#">链接</a>
            <a href="#">链接</a>
            <a href="#">链接</a>
        </div>
    </body>
</html>

求解：如果我把overflow:hidden删掉，<a>的背景颜色就变了，这是为什么？

最佳答案

月排行榜 / 总排行榜

不二如是

2020-2-3 21:36:34

1、首先了解 overflow 属性作用（详解：传送门）。

代码中 overflow: hidden; 用于保证 .top 区块内容会被修剪，并且其余内容是不可见的。

就是会自动给 .top 设置高度～

2、删除后，由于你代码中并没有给 .top 设置高度，会自动塌缩。

人工设置一个 height 就会看到内容。

跳转到最佳答案楼层

不二如是 · 发表于 2020-2-3 21:36:34

1、首先了解 overflow 属性作用（详解：传送门）。

代码中 overflow: hidden; 用于保证 .top 区块内容会被修剪，并且其余内容是不可见的。

就是会自动给 .top 设置高度～

2、删除后，由于你代码中并没有给 .top 设置高度，会自动塌缩。

人工设置一个 height 就会看到内容。

账号		自动登录	找回密码
密码			立即注册