Outil CSS : étanchéifier des éléments contenants

.ec:before {
    content: "\8";
    display: block;
    height: 0;
    text-indent: -4444px;
}
.ec:after {
    clear: both;
    content: " ";
    display: block;
}

Objectifs :

1. encadrer des flottants sans recourir à la propriété 'overflow' sur l'encadrant, ni à 'clear' sur l'élément qui suit ;
2. attribuer une marge supérieure à un élément (non flottant) sans incidence sur l'élément parent ;
3. avoir la possibilité de tenir compte le cas échéant de Safari 3  :) - testé sur Win 7 - et en oubliant ici IE 6 et 7.

Une question : css - Which method of ‘clearfix’ is best? - Stack Overflow
et une référence : A new micro clearfix hack – Nicolas Gallagher :

.cf:before,
.cf:after {
    content: " ";
    display: table;
}
.cf:after {
    clear: both;
}

La classe 'cf' permet d'atteindre simultanément les deux premiers objectifs (par application à l'élément contenant des éléments flottants et des éléments avec marge supérieure) - se référer à l'article "A new micro clearfix hack" pour les détails. Reste le troisième objectif.

1. Encadrement de flottants

.ec:after {
    clear: both;
    content: " ";
    display: block;
}

La valeur 'table' permettrait de mutualiser avec 'cf:before' mais sans fonctionner sur Safari 3 (Win & ?).

2. Encadrement d'éléments avec marge supérieure…

.ec:before {
    content: " ";
    display: table;
}

Cela ne fonctionnerait pas avec 'block', et par ailleurs ne marche pas sur Safari 3 (Win & ?).

2 bis. … avec la propriété 'display' réglée à 'block' et…

Une solution pour tenir compte de Safari 3 est offerte par le caractère "backspace" ('\7' marche aussi) qui rend efficiente la valeur 'block' de la propriété 'display' :

.ec:before {
    content: "\8";
    display: block;
    height: 0;
    text-indent: -4444px;
}

La propriété 'text-indent' sur une grande valeur négative est nécessaire pour Opera.

3. En bref

/* pour marges sup. */
.ec:before {
    content: "\8"; /* dont Safari 3 */
    display: block; /* dont Safari 3 */
    height: 0;
    text-indent: -4444px; /* pour Opera */
}
/* pour flottants */
.ec:after {
    clear: both;
    content: " ";
    display: block; /* dont Safari 3 */
}

Re-édité le 2 décembre 2013