Float Containing Rules By Browser

Following on from my previous entry, the table below shows which rules cause a container to clear its floats in each of the main browsers.

Rules vs Browser IE 5.0 IE 5 Mac IE 5.5 IE 6 IE 7 Firefox 1.5 Opera 9 Safari 2 
         
<!-- in css file -->
.clear { clear: both; }
            
<!-- at bottom of container -->
<div class="clear"></div>
Yes Yes Yes Yes Yes Yes Yes Yes 
         
#container:after {
   content: ".";
   display: block;
   height: 0;
   clear: both;
   visibility: hidden;
}
No No No No No Yes Yes Yes 
         
#container { display: inline-block; }
#container { display: block; }
No No Yes Yes Yes No No No 
         
#container { display: inline-block; }
/* Hides from IE-mac \*/
#container { display: block; }
/* End hide from IE-mac */
No Yes Yes Yes Yes No No No 
         
#container { _height: 1%; }
Yes No Yes Yes No No No No 
         
#container { width: 100%; }
Yes No Yes Yes Yes No No No 
         
#container { overflow: auto; }
No No No No Yes Yes Yes Yes 
         
#container { overflow: hidden; }
No Yes No No Yes Yes Yes Yes 
         
#container { zoom: 1; }
No No Yes Yes Yes No No No 
         
#container { float: left; }
Yes Yes Yes Yes Yes Yes Yes Yes