时间戳

首页 > 解决方案 > 有人可以解释一下 CSS 中的“溢出”到底对这个例子中的背景做了什么吗？

html - 有人可以解释一下 CSS 中的“溢出”到底对这个例子中的背景做了什么吗？

问题描述

我正在关注 HTML/CSS 教程，结果出现了。

HTML + CSS：

body {
  font-family: Arial, Helvetica, sans-serif;
}


/* Navbar Styling */

.navbar {
  list-style: none;
  margin: 0;
  padding: 0;
  background-color: lightblue;
  border-radius: 5px;
  overflow: auto;
}

.navbar li {
  float: left;
}


/* Side Menu Styling */

.side-menu {
  list-style: none;
  border: 1px #ddd solid;
  border-radius: 10px;
  width: 300px;
  padding: 20px;
}

.side-menu li {
  font-size: 18px;
  line-height: 2.4em;
  border-bottom: dotted 1px #ddd;
}

.side-menu li:last-child {
  border: none;
}

.side-menu li a {
  color: #333;
  text-decoration: none;
}

.side-menu li a:hover {
  color: coral;
}
<ul class="navbar">
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Services</a></li>
  <li><a href="#">Contact</a></li>
</ul>

<ul class="side-menu">
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Services</a></li>
  <li><a href="#">Contact</a></li>
</ul>

好的。所以教程解释：

1) 对于“navbar”类和“.navbar li”类

如果我删除溢出：自动；从 .navbar 和浮动：左；from .navbar li ... lightblue 显示的背景色。

2）如果我添加浮动：左；到 .navbar li 然后背景颜色消失

3）教程继续通过添加溢出来解释：自动；背景颜色出现。

我想了解这个概念背后的原理。我在网上搜索，这是 MDN 所说的：

“溢出速记 CSS 属性设置当元素的内容太大而无法适应其块格式上下文时要做什么。它是溢出-x 和溢出-y 的简写。”

https://developer.mozilla.org/en-US/docs/Web/CSS/overflow

我还不是编程专家，但我可以阅读英语。本例中元素的内容就是这些链接，即“主页”、“关于”、“服务”和“联系方式”。那么，这与背景颜色的出现和不出现有什么关系呢？“块格式上下文”是什么意思？我阅读了 MDN 文档的其余部分；但是，我仍然感到困惑。

谁能用外行的方式向我解释一下，以便我了解发生了什么？视觉辅助也很受欢迎。请简单地向我解释，并假设我不聪明。我真的很想了解这段代码背后的概念，而不仅仅是复制代码，因为我想在将来使用它。

标签： htmlcss

解决方案

该overflow: auto技巧用于清除浮动。由于您的.nav元素仅包含浮动子元素，因此当您不指定overflow属性时，其自身的尺寸将折叠到 0 的高度。那是因为浮动子元素时，它们会从文档流/布局中取出，并且不会正常添加到父元素的计算维度中。

当父元素的维度折叠时，它基本上没有高度，因此它的蓝色背景不显示。

事实上，当设置overflow为默认值（即 ）以外的任何值时overflow: visible，您将创建一个新的块格式化上下文。这显然具有清除浮动的效果。

推荐阅读