代码中<ul>高度为0的原因？与overflow:hidden相关

这得从CSS的高度计算规则和**块级格式化上下文（BFC）**说起，结合你的场景，最常见的原因有两个：

1. BFC阻断了外边距折叠，导致<ul>失去间接高度支撑 #

假设你的<ul>没有设置padding或border，而内部的<li>设置了垂直外边距（比如margin-top）：

• 当<ul>没有overflow:hidden时，会发生垂直外边距折叠：<li>的外边距会“延伸”到<ul>的外部，此时<ul>的高度会由<li>的实际内容高度撑起来（因为<li>处于正常文档流中，父元素会自动包裹子元素的内容），所以看起来高度正常。
• 当你给<ul>加上overflow:hidden时，它会触发BFC。BFC的核心特性之一是阻止内部元素与外部元素的外边距折叠，这时候<li>的外边距会被限制在<ul>内部。如果<li>的内容高度非常小（甚至为空），<ul>的高度就会被压缩到几乎为0（因为没有其他内容或内边距支撑）。

2. overflow:hidden隐藏了撑开高度的内容 #

如果你的<ul>内部的列表项（<li>）设置了超出<ul>初始高度的内容，同时<ul>没有设置明确的高度：

• 当你移除overflow:hidden时，超出的内容会“溢出”到<ul>外部，此时浏览器会自动计算<ul>的高度为所有子元素的总高度（即使内容溢出），所以看起来高度正常。
• 当你加上overflow:hidden时，浏览器会把超出<ul>初始高度的内容裁剪掉，而如果<ul>的初始高度被设置为0（比如通过line-height:0、font-size:0且子元素是行内元素），那么<ul>的高度就会保持为0，所有子元素内容都被隐藏。

举个直观的代码例子：

/* 触发问题的CSS */
ul {
  overflow: hidden;
  font-size: 0;
  line-height: 0;
}
li {
  font-size: 16px;
  line-height: 24px;
}

这里<ul>的font-size和line-height都被设为0，加上overflow:hidden后，浏览器会认为<ul>的高度为0，<li>的内容被裁剪；移除overflow:hidden后，<li>的行高会撑开<ul>的高度，所以看起来正常。

内容的提问来源于stack exchange，提问作者HKN