有人可以解释一下这个例子中 CSS 中的“溢出”到底对背景做了啥吗？ [复制]

Posted 2023-03-04

【中文标题】有人可以解释一下这个例子中 CSS 中的“溢出”到底对背景做了啥吗？ [复制]

【英文标题】：Could someone please explain what exactly "Overflow" in CSS does to a background in this example? [duplicate]有人可以解释一下这个例子中 CSS 中的“溢出”到底对背景做了什么吗？ [复制]

【发布时间】：2020-04-29 22:04:17

【问题描述】：

我正在关注 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 ... 浅蓝色显示的背景色。

2) 如果我添加 float: left;到 .navbar li 然后背景颜色消失

3) 本教程继续通过添加溢出来解释这一点：自动；出现背景色。

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

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

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

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

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

【问题讨论】：

似乎没有任何合乎逻辑的推理来解释为什么会这样。我只是将它归档在“CSS 技巧”下，并在它派上用场时使用它。有关浮动和溢出的更多信息（但没有明确解释其工作原理），请参见此处：***.com/a/16568504/1195615 和此处：lockedownseo.com/parent-div-100-height-child-floated-elements

不幸的是，“外行术语”和“理解概念”有些互不相容，尤其是因为有太多错误信息可用。例如，下面的@Terry 将overflow: auto 描述为“用于清除浮动”，这并不少见，并反映了重复中描述的“clearfix”概念。然而这是不正确的，overflow:auto 和 display:flow-root 所做的和浮动清除所做的是完全不同的概念，在这种情况下会产生类似的效果。

【参考方案1】：

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

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

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