clearfix : forcer un bloc à respecter ses enfants

sur clearfix = “float containment” cf http://fuseinteractive.ca/blog/understanding-humble-clearfix

La hauteur du parent n'etant pas visible par les enfants, il est possible que (contenus en flux insuffisant pour remplir) un conteneur d'élément flottant puisse être plus petite que le contenu flotté (marges, frontières... peuvent ne pas se comporter comme nous le voulons).

Historiquement, il existe deux principales approches pour résoudre ces questions.

La 1ere utilise clear, la seconde est plus complexe (Block Formatting Context).

avec clear,

ajout après tous les éléments flottants d'un marqueur, puis force cet élément marqué à s'afficher sous les flotteurs avec clear: both; Par ex (donner couleur de fond à .container):

<div class = "container">
 
<div style = "float: left;"> <p> Je flottais </ p> </ div>
 
<div style = "float: left;"> <p> Je flottais </ p> </ div>
 
<div style = "clear: both;"> </ div>
</ div>

avec BFC ou flow root (racine de flux)

un contexte "bloquer formatage" délimite une région du document dans lequel les boîtes de bloc sont énoncées. Les BFC sont dans le flux (éléments de bloc normals) mais isolées d'où les avantages (BFC contiennent les marges verticales des éléments enfants,BFC et les flotteurs ne peuvent pas se chevaucher).

  1. avoit des floats
  2. Veiller à la valeur calculée de overflow ne soient pas visible => par exemple, définir overflow: hidden;
  3. Mettre display à inline-block, inline-table, table-cell ou table-caption.
  4.      et position en absolute ou fixed

effets secondaires:

  • overflow: scroll peut déclencher des barres de défilement et hidden coupera débordement (y compris les bagues de mise au point et les enfants placés)
  • display : toutes les valeurs choisies conduisent l'élément à se rétrécir, exigeant habituellement width: 100% parfois d'autres correctifs.
    L'utilisation de valeurs d'affichage de table pose des problèmes pour les images fluides dimensionnés avec max-width: 100% dans certains navigateurs (notamment Firefox). Les problèmes avec table-caption ne peuvent être tous surmontés...

Voici un ex (moderne et simplifié, appliquer la classe cf à une div parente) :

/* Contain floats. */ 
.cf:after { content: ' '; display: block; clear: both; }

Ex 2:

/* Contain floats *and margins*. */ 
.cfm:before, .cfm:after { content: ' '; display: table; } .cfm:after { clear: both; }

 

Dans views 3, dans Format / paramètres / Classe de ligne :  ajouter ".clearfix" ajoute la classe à chaque ligne.


spects http://www.w3.org/TR/css3-box/#flow-root

logo drush