After reading a question on forrst I realized that there were a lot of false truth about clearing floats technics. I made this page to summarize these and choose those to use (or not) once and for all.
The results below are not complete but really tested. Even if I know that safari correctly interpret these methods before version 5, I tested with safari 5 and will not speculate.
| Extra markup | :after | overflow: auto | overflow: hidden | float | ||
|---|---|---|---|---|---|---|
| Chrome 6+ | OS X | |||||
| Chrome 5+ | Windows Vista | |||||
| Firefox 2+ | OS X | |||||
| Firefox 3.5.9+ | Windows Vista | |||||
| Internet Explorer 5.5+ | Windows Vista | |||||
| Opera 10.10+ | OS X | |||||
| Opera 10.50+ | Windows Vista | |||||
| Safari 5+ | OS X | |||||
| Safari 5+ | Windows Vista |
Awaiting for your submissions : cahnory@gmail.com
#test-1 .clearer { clear: left; }
/* IE fixes */
.lt-ie8 #test-1 .clearer { height: 0; }
.lt-ie7 #test-1 .clearer { font-size: 0; }
If you want to use classes like these to fix ie issues see this page
#test-2:after { content: ''; display: block; clear: left; }
Until Internet Explorer 8, the content is not generated but properties seems to be applied.
#test-3 { overflow: auto; }
#test-3 { overflow: hidden; }
#test-3 { float: left; }