溢出:隐藏确实清除:

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. 使用ed元素overflow: hidden;的父级float.
2. 给一个float: left;或者float: right;父float元素的ed元素.
3. clear在浮动元素的末尾给出元素作为兄弟元素.

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

是的,您可以使用该overflow: hidden;功能,但存在问题.假设你有像弹出列表或弹出窗口这样的东西,这些东西会被UL标签的尺寸切割掉.

如果您想要显示它们,则需要使用<ul class="clearfix">.我会说,clearfix比...更好overflow: hidden;.

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