Changed standard +clearfix to use overflow: hidden.

Added alternate +pie-clearfix using content :after

examples/compass/src/utilities.sass

@@ -84,3 +84,18 @@ h2
     +float-left
   .float-right-example
     +float-right
+  .pie-clearfix-example
+    :background #ddd
+    :border 2px solid black
+    :text-align center
+    :position relative
+    +pie-clearfix
+    .positioned-example
+      :display block
+      :position absolute
+      :left -10px
+      :top -10px
+      :font-size 10px
+      :width 10em
+      :background #ccf
+      :border 1px solid black

examples/compass/utilities.html.haml

@@ -138,18 +138,23 @@
                 %th Totals
                 %td.numeric.even 15.5
                 %td.numeric.odd  16.0
-                %td.numeric.even 17.5                    
+                %td.numeric.even 17.5
       #floats
         .example
           %h2 Floats
+          %p
+            The float helpers add fixes for the double-margin float
+            bug, so you don't need to remember.
           %p
             Floated elements will extend beyond the bottom boundary of their
             parent container unless a
             %code.mixin +clearfix
             is applied to the parent.
           %p
-            The float mixins add fixes for the double-margin float
+            The regular
-            bug, so you don't need to remember.
+            %code.mixin +clearfix
+            method uses overflow:hidden. This is a simple and reliable way to
+            get your box wrapped around your float elements.
           .clearfix-example
             .float-left-example
               This div is styled with
@@ -161,3 +166,20 @@
               and it should be 20px from the right edge, even in IE6.
             This div is styled with
             %code.mixin +clearfix
+          %p
+            An alternate clearing method is provided for when elements need
+            to be positioned to hang outside the box. This is based on the
+            \:after content method.
+          .pie-clearfix-example
+            .float-left-example
+              This div is styled with
+              %code.mixin +float-left
+              \. It is taller than its parent and it should be 20px from the left edge.
+            .float-right-example
+              This short div is styled with
+              %code.mixin +float-right
+              and it should be 20px from the right edge, even in IE6.
+            This div is styled with
+            %code.mixin +pie-clearfix
+            .positioned-example
+              Using this clear method, this positioned box is not cut off.

frameworks/compass/stylesheets/compass/utilities/general/_clearfix.sass

@@ -0,0 +1,24 @@
+@import hacks.sass
+
+//**
+  Extends the element to enclose any floats it contains.
+  This basic method is preferred for the usual case, when positioned content will not show outside the bounds of the container.
+  Recommendations include using this in conjunction with a width:
+  http://www.quirksmode.org/blog/archives/2005/03/clearing_floats.html
+=clearfix
+  :overflow hidden
+  +has-layout
+
+//**
+  Extends the element to enclose any floats it contains.
+  This older "Easy Clearing" method has the advantage of allowing positioned elements to hang outside the bounds of the container, at the expense of more tricky CSS.
+  http://www.positioniseverything.net/easyclearing.html
+=pie-clearfix
+  &:after
+    :content " "
+    :display block
+    :height 0
+    :clear both
+    :overflow hidden
+    :visibility hidden
+  +has-layout

frameworks/compass/stylesheets/compass/utilities/general/_float.sass

@@ -1,14 +1,5 @@
-// Clearing floats without extra markup
+//**\\
-// Simple Clearing of Floats
+  Float
-// [http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/]
-=clearfix
-  :overflow auto
-  :overflow -moz-scrollbars-none
-  // This makes ie6 get layout
-  :display inline-block
-  // and this puts it back to block
-  &
-    :display block
 
 // Implementation of float:left with fix for double-margin bug
 =float-left

frameworks/compass/stylesheets/compass/utilities/general/_hacks.sass

@@ -0,0 +1,6 @@
+=has-layout
+  // This makes ie6 get layout
+  :display inline-block
+  // and this puts it back to block
+  &
+    :display block