溢出：隐藏确实清除：

Question

在我读过的一篇文章中，有一个关于<li>中浮动<ul>的问题。那家伙问他为什么<ul>背景在<li>上浮动时会消失，以及他如何解决这个问题。答案是将overflow:hidden设置为<ul>。我试过了，它会起作用，但在此之前我没有读过和听过。

我的问题是：您可以使用overflow:hidden清除像clearfix这样的元素吗？

在这种情况下：

<ul>
  <li>one</li>
  <li>two</li>
  <li>three</li>
</ul>

如果我有以下CSS：

ul{
  background: #999;
  overflow: hidden;
}

li {
  float: left;
}

我还需要清除：<ul class="clearfix">和CSS：

.clearfix { *zoom: 1; }
.clearfix:after { 
    width: 100%; 
    content: ''; 
    font-size: 0; 
    line-height: 0; 
    text-indent: -4000px; 
    clear: both; 
    display:block; 
}

或者我可以让overflow:hidden完成这项工作

Answer 1

是！

clear有三种方式：

1. 将overflow: hidden;用于float ed元素的父级。
2. 向float: left; ed元素的父级提供float: right;或float。
3. 在浮动元素的末尾给出一个clear元素作为兄弟。

对于你的问题......

是的，你可以使用overflow: hidden;来做，但是有问题。假设你有像弹出列表或弹出窗口这样的东西，那些东西会被UL标签的尺寸切割。

如果您希望也显示它们，则需要使用<ul class="clearfix">。我会说，clearfix胜过overflow: hidden;。

ps：我是一名前端工程师，负责开发兼容所有浏览器的企业Web应用程序。