[已解决]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 就会看到内容。

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