在我读过的一篇文章中,有一个关于<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
完成这项工作
答案 0 :(得分:6)
clear
有三种方式:
overflow: hidden;
用于float
ed元素的父级。float: left;
ed元素的父级提供float: right;
或float
。clear
元素作为兄弟。是的,你可以使用overflow: hidden;
来做,但是有问题。假设你有像弹出列表或弹出窗口这样的东西,那些东西会被UL
标签的尺寸切割。
如果您希望也显示它们,则需要使用<ul class="clearfix">
。我会说,clearfix
胜过overflow: hidden;
。
ps:我是一名前端工程师,负责开发兼容所有浏览器的企业Web应用程序。