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

overflow:hidden的小问题

<!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 就会看到内容。
页: [1]
查看完整版本: overflow:hidden的小问题