为啥一个元素在“溢出：可见”时消失，但在“溢出：隐藏”时可见？ [复制]

Posted 2023-03-06

【中文标题】为啥一个元素在“溢出：可见”时消失，但在“溢出：隐藏”时可见？ [复制]

【英文标题】：Why an element disappears with "overflow: visible" but is visible with "overflow: hidden"? [duplicate]为什么一个元素在“溢出：可见”时消失，但在“溢出：隐藏”时可见？ [复制]

【发布时间】：2018-08-21 19:16:14

【问题描述】：

当我使用默认的overflow 值时，<ul> 元素会消失。这是我用 Google Chrome 测试过的片段：

ul 
  list-style-type: none;
  background-color: #333333;


li 
  float: left;
  color: white;

<ul>
  <li>Test</li>
</ul>

但是，当我将overflow: hidden; 添加到<ul> 时，它变得可见：

ul 
  list-style-type: none;
  background-color: #333333;
  overflow: hidden;


li 
  float: left;
  color: white;

<ul>
  <li>Test</li>
</ul>

据我所知，overflow 属性指定溢出是否呈现在元素的框之外。为什么设置了默认的overflow: visible后整个元素是不可见的？

【问题讨论】：

你不应该真正使用浮动来定位，现在有更好的方法来做到这一点 - 例如 flexbox

【参考方案1】：

因为你的ul 没有设置height

为了让溢出生效，块级容器 必须有一个设定的高度（高度或最大高度）或空白 设置为 nowrap。

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