We've come up with 5 clearing solutions to test. Below are our finds when testing on different browsers. The test has been added to /tests/manual-tests/ in https://github.com/jobara/infusion/tree/FLUID-4023.

1) fl-fix

Our current solution in FSS.

CSS

Browser Issues

All:
Plain Divs - Adds scrollbars when content size > container size

Mac:
FF3.6 - fine, except scrollbars
Safari 5 - fine, except scrollbars
FF4 - fine, except scrollbars
Opera - fine, except scrollbars

WinXP:
IE8 - fine, except scrollbars
FF3.6 - fine, except scrollbars
Chrome - fine, except scrollbars
IE6 - no scrollbar issue (instead the container just expands), columns: 3 flex only has 2 columns
IE7 - fine, except scrollbars

Win7:
IE9 - fine, except scrollbars
IE8 - fine, except scrollbars
FF4 - fine, except scrollbars
FF3.6 - fine, except scrollbars

2) jQuery's ui-helper-clearfix

From jQuery UI.

CSS

Browser Issues

All:
Mixed columns - clears div in flex column to bottom of fixed column.

Mac:
FF3.6 - fine, except clearing too far
Safari5 - fine, except clearing too far
FF4 - fine, except clearing too far
Opera - fine, except clearing too far

WinXP:
IE8 - fine, except clearing too far
FF3.6 - fine, except clearing too far
Chrome - fine, except clearing too far
IE6 - no clears to bottom issue, columns: 3 flex only has 2 columns
IE7 - no clears to bottom issue, Plain div 100% + padding if the window is shrunk the text can cross the border

Win7:
IE9 - fine, except clearing too far and Plain div 100% + padding if the window is shrunk the text can cross the border
IE8 - fine, except clearing too far
FF4 - fine, except clearing too far
FF3.6 - fine, except clearing too far and Plain div 100% + padding if the window is shrunk the text can cross the border

3) Old Clearfix

From http://perishablepress.com/press/2009/12/06/new-clearfix-hack/.

CSS

Browser Issues

All:
Mixed columns - clears div in flex column to bottom of fixed column.

Mac:
FF3.6 - fine, except clearing too far
Safari 5 - fine, except clearing too far
FF4 - fine, except clearing too far
Opera - fine, except clearing too far

WinXP:
IE8 - fine, except clearing too far
FF3.6 - fine, except clearing too far
Chrome - fine, except clearing too far
IE6 - no clears to bottom issue, columns: 3 flex only has 2 columns
IE7 - doesn't work at all !!!

Win7:
IE9 - fine, except clearing too far and Plain div 100% + padding if the window is shrunk the text can cross the border
IE8 - fine, except clearing too far
FF4 - fine, except clearing too far
FF3.6 - fine, except clearing too far and Plain div 100% + padding if the window is shrunk the text can cross the border

4) New Clearfix

Also from http://perishablepress.com/press/2009/12/06/new-clearfix-hack/.

CSS

Browser Issues

All:
Mixed columns - clears div in flex column to bottom of fixed column.

Mac:
FF3.6 - fine, except clearing too far
Safari5 - fine, except clearing too far
FF4 - fine, except clearing too far
Opera - fine, except clearing too far

WinXP:
IE8 - fine, except clearing too far
FF3.6 - fine, except clearing too far
Chrome - fine, except clearing too far
IE6 - no clears to bottom issue, columns: 3 flex only has 2 columns
IE7 - no clears to bottom issue, Plain div 100% + padding if the window is shrunk the text can cross the border

Win7:
IE9 - fine, except clearing too far and Plain div 100% + padding if the window is shrunk the text can cross the border
IE8 - fine, except clearing too far
FF4 - fine, except clearing too far
FF3.6 - fine, except clearing too far and Plain div 100% + padding if the window is shrunk the text can cross the border

5) display:inline-block

Seems to clear divs well.

CSS

Browser Issues

All:
List with floats - container doesn't expand to the width of the screen

Mac:
FF3.6 - fine, except width
Safari5 - fine, except width
FF4 - fine, except width
Opera - fine, except width

WinXP:
IE8 - fine, except width
FF3.6 - fine, except width
Chrome - fine, except width
IE6 - expands to width of screen, columns: 3 flex only has 2 columns
IE7 - no clears to bottom issue, Plain div 100% + padding if the window is shrunk the text can cross the border

Win7:
IE9 - fine, except width and Plain div 100% + padding if the window is shrunk the text can cross the border
IE8 - fine, except width
FF4 - fine, except width and Plain div 100%
FF3.6 - fine, except width and Plain div 100% + padding if the window is shrunk the text can cross the border