update the docs for compass/utilities/general/clearfix

This commit is contained in:
Chris Eppstein 2010-04-25 19:06:14 -07:00
parent e2f58775aa
commit e181ad6a05
2 changed files with 29 additions and 18 deletions

View File

@ -12,4 +12,5 @@ classnames:
---
- render 'reference' do
%p
Lorem ipsum dolor sit amet.
A clearfix will extend the bottom of the element to enclose any
floated elements it contains.

View File

@ -1,18 +1,26 @@
// @doc off
// Extends the bottom of the element to enclose any floats it contains.
// @doc on
@import "hacks";
//**
// 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
// 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.
// Credit: [quirksmode.org](http://www.quirksmode.org/blog/archives/2005/03/clearing_floats.html)
@mixin clearfix {
overflow: hidden;
@include has-layout; }
@include 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
// This older method from Position Is Everything called
// [Easy Clearing](http://www.positioniseverything.net/easyclearing.html)
// has the advantage of allowing positioned elements to hang
// outside the bounds of the container at the expense of more tricky CSS.
//
// This method of clearing might cause a gap at the bottom of the page in
// some browsers when used on the last element of the page.
@mixin pie-clearfix {
&:after {
content : " ";
@ -20,5 +28,7 @@
height : 0;
clear : both;
overflow : hidden;
visibility: hidden; }
@include has-layout; }
visibility : hidden;
}
@include has-layout;
}