CSS   发布时间:2022-04-17  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了CSS背景颜色没有显示,除非我添加overflow:hidden?为什么?大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在研究CSS布局,但我不明白为什么我的导航栏的背景颜色不会显示,除非我添加溢出:隐藏到CSS.有人可以向我解释发生了什么事吗?谢谢 :)

我的CSS文件:

@import "reset.css"; /* Meyer's CSS reset */

body { background-color: #f3f3f3;   font: 15px sans-serif; }

#wrapper { 
  width: 1000px;
  margin: 0 auto;
}

#navigation {
  width: inherit;
  margin-top: 20px;
  background-color: #ccc;
  overflow: hidden;
}

#navigation li {
  float: left;
}

#navigation li a {
  display: block;
  padding: 10px 10px;
  text-decoration: none;
  color: #000;
}

#navigation li a:hover {
  background-color: #aaa;
}

我的HTML文件:

<!DOCTYPE html>
<html>
<head>
  <title>Layout</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <link rel="stylesheet" type="text/css" href="css/styles.css" />
</head>
<body>
  <div id="wrapper">
    <div id="navigation">
      <ul>
        <li><a href="">Nav0</a></li>
        <li><a href="">Nav1</a></li>
        <li><a href="">Nav2</a></li>
        <li><a href="">Nav3</a></li>
        <li><a href="">Nav4</a></li>
        <li><a href="">Nav5</a></li>
      </ul>
    </div>
    <div id="header">
    </div>
    <div id="content">
    </div>
    <div id="footer">
    </div>
  </div>
</body>
</html>

解决方法

overflow:hidden导致容器建立一个新的 formatting context,在其中包含浮动.没有它,浮动元素形成它们自己的格式化上下文并独立于容器显示,超出正常流程.

大佬总结

以上是大佬教程为你收集整理的CSS背景颜色没有显示,除非我添加overflow:hidden?为什么?全部内容,希望文章能够帮你解决CSS背景颜色没有显示,除非我添加overflow:hidden?为什么?所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签: