2

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

我的问题是：您可以使用overflow:hiddenclearfix 之类的清除元素吗？

在这种情况下：

<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做那份工作

4

1 回答 1

6

是的！

有以下三种方法clear：

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

对于你的问题...

是的，您可以只使用overflow: hidden;to do，但是有一个问题。假设您有弹出列表或弹出框之类的东西，这些东西会随着UL标签的尺寸而减少。

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

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

于 2013-01-16T11:11:49.540 回答