溢出:隐藏确实清除:

时间:2013-01-16 11:07:30

标签: html css

在我读过的一篇文章中,有一个关于<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完成这项工作

1 个答案:

答案 0 :(得分:6)

是!

clear有三种方式:

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

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

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

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