overflow:hidden为何让列表可见？与overflow:visible异常问题解析

问题描述 #

写了一段实现水平无序列表的HTML和CSS代码，当给ul元素设置overflow:hidden时，列表能正常显示；但改成overflow:visible后，列表居然“消失”了。按道理overflow:visible应该显示溢出内容，为啥会出现这种反常识的情况？

相关代码 #

CSS代码 #

body {
    text-align: center;
}

ul {
    overflow: hidden;
    background-color: #1d6b0d;
    list-style-type: none;
}

li {
    float: left;
}

li a {
    text-decoration: none;
    color: white;
    padding: 0.5rem;
}

HTML代码 #

<h3>HTML Horizontal Unordered List</h3>

<ul>
    <li><a href="#course">Course</a></li>
    <li><a href="#Blog">Blogs</a></li>
    <li>
        <a href="#Content">Content</a>
    </li>
</ul>

原因解析 #

问题出在浮动元素导致的父容器高度塌陷：

• 当li设置了float:left后，会脱离文档流，不再参与父容器ul的高度计算。默认情况下，ul的高度会直接塌陷成0。
• 给ul加overflow:hidden时，会触发它的块级格式化上下文（BFC）。BFC有个特性就是会把内部的浮动元素“包裹”住，所以ul会被浮动的li撑开高度，背景色和列表内容自然就能正常显示。
• 改成overflow:visible（这是默认值）时，不会触发BFC，ul的高度还是塌陷成0：此时ul的背景看不到，而浮动的li虽然实际存在，但因为ul没有高度，视觉上可能和上方的元素重叠，看起来就像“消失”了。

解决方法 #

如果想保留overflow:visible同时让列表正常显示，只要让ul能正确包裹住浮动元素就行，比如：

• 给ul加一个清除浮动的伪元素（最常用的方法）：

ul::after {
    content: "";
    display: block;
    clear: both;
}

• 给ul设置display: flow-root（现代浏览器都支持，更简洁的触发BFC方式）
• 给ul设置固定高度（不推荐，内容变化时容易出问题）

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