I define a container element contains a float div and a ul, and the ul element contains a few float li element. I want to clear the ul's float ,but the ul's height affected by its float sibling element. Is it a bug the clearfix has?
.clearfix {
*zoom: 1;
}
.clearfix:after {
content:".";
display:block;
height:0;
line-height: 0;
clear:both;
visibility: hidden;
}
Visit http://jsfiddle.net/ltchronus/MV9pm/ to see my demo.
The bug isn't in the clearfix, the "bug" is the clearfix.
Because the div is floating, the clearfix has to clear that floating sibling even though it's not part of the contents of the ul in the source. This is because both the ul's floating contents and the floating div participate in the same block formatting context (that of the root element).
You can easily correct this by triggering a new block formatting context in the ul by setting its overflow property to something other than visible to ensure that the clearfix is localized to just the ul's formatting context, but then once you do that the clearfix becomes completely unnecessary anyway and you may as well get rid of it altogether.
This is why I personally do not use, and do not recommend using, clearfix: at best it's an unnecessary hack — which is not to say setting overflow isn't a hack; it is, too, since triggering BFCs is but a not-so-intended side-effect and certainly not what overflow was designed to do, but it's far easier to troubleshoot than issues caused by clearfix like the one you just ran into, especially if you do not have a solid understanding of the float model (and even I don't claim that myself)