Question

In one post I read there was a question about floated <li> in <ul>. The guy was asking why his <ul> background disappears when he floated the <li>‘s and how he could fix this. An answer was to set overflow:hidden to the <ul>. I tried it, and it will worked, but I haven’t read and heard before something like that.

My question is: Can you use overflow:hidden for clearing elements like clearfix?

In this case:

<ul>
  <li>one</li>
  <li>two</li>
  <li>three</li>
</ul>

if I have the following CSS:

ul{
  background: #999;
  overflow: hidden;
}

li {
  float: left;
}

Do I still need to clear with: <ul class="clearfix"> and CSS:

.clearfix { *zoom: 1; }
.clearfix:after { 
    width: 100%; 
    content: ''; 
    font-size: 0; 
    line-height: 0; 
    text-indent: -4000px; 
    clear: both; 
    display:block; 
}

Or I just can let overflow:hidden to do that job

Answer 1

Yes!

There are three ways to clear:

1. Using overflow: hidden; to the parent of the floated elements.
2. Giving a float: left; or float: right; to the parent of the floated elements.
3. Giving a clearing element as a sibling at the end of the floated elements.

For your question…

Yes, you can just use the overflow: hidden; to do, but there’s a problem. Say you have something like flyout list or popover, those things get cut with the dimensions of the UL tag.

If you want them to be displayed too, you need to use <ul class="clearfix">. I would say, clearfix is better than overflow: hidden;.

ps: I am a front end engineer developing enterprise web applications that compatible across all browsers.