- Accueil
- Info légales
- Aide (FAQ)
- Les tags de ce site
- Bloc note
- Articles techniques
- Notes system
- Divers articles
- Drupal
- Notes ITIL 2007
- Notes MS
- Dans le quartier...
- Emploi
- Recettes de cuisine et adresses gourmandes
- mes applis ubuntu préferées
- Divers acronymes du monde social
- Internet 2018
- P2 meublé à louer - quartier du Poteau 75018
- apcos - réseaux sociaux et outils
- Articles techniques
- Divers liens
- Fun
- Mon CV IT
- Nouveautés
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).
- avoit des floats
-
Veiller à la valeur calculée de
overflow
ne soient pasvisible
=> par exemple, définir overflow: hidden; - Mettre display à inline-block, inline-table, table-cell ou table-caption.
- 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 avecmax-width: 100%
dans certains navigateurs (notamment Firefox). Les problèmes avectable-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.