github-migration/compass
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Changed standard +clearfix to use overflow: hidden.

Browse Source 
Added alternate +pie-clearfix using content :after
This commit is contained in:
Andrew Vit 2009-03-31 15:02:38 -07:00 committed by Chris Eppstein
parent 150e7bf6a7
commit d9416f65fa
5 changed files with 72 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
examples/compass/src/utilities.sass
View File

@ -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

28
examples/compass/utilities.html.haml
View File

@ -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
bug, so you don't need to remember.
The regular
%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.

24
frameworks/compass/stylesheets/compass/utilities/general/_clearfix.sass Normal file
View File

@ -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

13
frameworks/compass/stylesheets/compass/utilities/general/_float.sass
View File

@ -1,14 +1,5 @@
// Clearing floats without extra markup
// Simple Clearing of Floats
// [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
//**\\
Float
// Implementation of float:left with fix for double-margin bug
=float-left

6
frameworks/compass/stylesheets/compass/utilities/general/_hacks.sass Normal file
View File

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