mishelen of sCopySS
3/6/2014 - 10:14 PM

ClearFix`ы

ClearFix`ы

/*This basic method is preferred for the usual case, when positioned content will not show outside the bounds of the container.

http://www.quirksmode.org/css/clearing.html - explains how to resolve common issues related to this technique, namely, setting width: 100% on the container.*/
.container {
    overflow: hidden;
    display: inline-block; /* Necessary to trigger "hasLayout" in IE */
    display: block; /* Sets element back to block */
}

/*Rather than using the display property to set "hasLayout" for IE, other properties can be used for trigering "hasLayout" for an element.*/
.container {
    overflow: hidden; /* Clearfix! */
    zoom: 1;  /* Triggering "hasLayout" in IE */
    display: block; /* Element must be a block to wrap around contents. Unnecessary if only using block-level elements. */
}

/*Another way to clear floats using the overflow property is to use the underscore hack. IE will apply the values prefixed with the underscore, other browsers will not. The zoom property triggers hasLayout in IE:*/
.container {
    overflow: hidden;
    _overflow: visible; /* for IE */
    _zoom: 1; /* for IE */
}

/*While this works… it is ideal not to use hacks.*/
/*A much simpler, more up to date solution for general usage, (for now at least)
Nicolas Gallagher's 2011 micro-clearfix
http://nicolasgallagher.com/micro-clearfix-hack/*/
/* For modern browsers */
.container:before,
.container:after {
    content:"";
    display:table;
}
.container:after {
    clear:both;
}
/* For IE 6/7 (trigger hasLayout) */
.container {
    zoom:1;
}
/*http://www.css-101.org/articles/clearfix/latest-new-clearfix-so-far.php
The new standard, as used by Inuit.css and Bourbon - two very widely used and well-maintained CSS/Sass frameworks:*/
.btcf:after {
    content:"";
    display:table;
    clear:both;
}

/*This doesn't support IE7.
2012 cl-fx from Thierry Koblentz*/
/*I recommend using the following, which is taken from http://html5boilerplate.com/*/
/* >> The Magnificent CLEARFIX << */
.clearfix:after { 
  content: "."; 
  display: block; 
  height: 0; 
  clear: both; 
  visibility: hidden; 
}
.clearfix { 
  display: inline-block;  
}
* html .clearfix {  
  height: 1%;  
} /* Hides from IE-mac \*/
.clearfix {  
  display: block;  
}
/*":after" Pseudo-element

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*/
.container {
    display: inline-block;
}
.container:after {
    content: " ";
    display: block;
    height: 0;
    clear: both;
    overflow: hidden;
    visibility: hidden;
}
.container {
    display: block;
}