html - 是否溢出 :hidden do clear:

Question

在我读到的一篇帖子中，有一个关于 float <li> 的问题在 <ul> .那家伙问为什么他的<ul>当他 float <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 的父级编辑元素。
2. 提供 float: left;或 float: right;到 float 的父级编辑元素。
3. 提供 clear将元素作为 float 元素末尾的兄弟元素。

对于你的问题...

是的，您可以只使用 overflow: hidden;要做，但是有一个问题。假设您有弹出列表或弹出窗口之类的东西，这些东西会用 UL 的尺寸进行切割。标签。

如果你想让它们也显示出来，你需要使用<ul class="clearfix"> .我会说，clearfix优于overflow: hidden; .

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