 |
Forum |
|
|
Réagissez
dans les forums de JDN Développeurs
|
Pourtant l'une des propriétés les plus utilisées en matière de CSS, float,
avec ses valeurs left, right et none, reste
celle dont le comportement est le moins prédictible par les designers Web même
non débutants. Combiné à la propriété clear, et ses valeurs left,
right, both et none, cela donne parfois
des arrangements de règles hasardeuses dont l'affichage final est le résultat
avant tout à d'une suite de tâtonnements et de rechargements de page.
Comprendre le
comportement de float implique une compréhension plus globale de
la philosophie des CSS, notamment celle du flux. Les CSS sont en effet conçues
pour afficher les éléments au sein d'un flux : pour simplifier, les éléments en
ligne, ou inline, sont affichés les uns à la suite des autres, tandis que
les éléments conteneurs, ou block, amènent un retour à la ligne après leur
affichage.
Le texte et les balises de présentations (b, i, span,
...) sont des éléments inline, les images et balises de regroupement (p,
div, form, ...) sont des éléments block. Le flux fait
en sorte que ces éléments s'affichent naturellement, les uns à la suite des autres,
en respectant les spécificités de chaque type.
 |
|
Du code XHTML avec les bordures
stylées
|
float permet de sortir un élément du flux, en cela que l'on peut
préciser si l'élément ciblé, par exemple une image ou une colonne de contenu,
s'affiche à gauche ou à droite. Et c'est ici trop souvent que le bât blesse :
les designers voient souvent uniquement cette caractéristique de float, à savoir
l'affichage de l'élément à gauche ou à droite. Ce faisant, ils oublient
une autre caractéristique, implicite mais peut-être plus importante encore : le
reste du flux, lui, sera décalé à droite de l'élément flottant, et poursuivra
en dessous selon sa longueur.
De fait, si l'on peut facilement déduire le comportement de l'élément flottant,
celui du reste du flux devra être deviné par le designer, qui devra prévoir l'écoulement
des éléments inline et block bien à l'avance. C'est pourquoi il est nécessaire
de préciser la taille d'un élément flottant, ainsi que de prévoir la place prise
par le reste du flux.
 |
|
Le même code, avec la
propriété float:left
appliquée au tout premier bloc de texte
|
 |
|
Une ligne de texte a maintenant
le propriété float:right.
|
Le comportement inattendu du reste du flux se retrouve souvent sous la forme d'autres
éléments flottants qui n'occupent pas la place voulue. C'est ici que la propriété
clear entre en jeu. Celle-ci contrôle le comportement des éléments
qui suivent, dans le flux, un élément flottant. Par défaut, l'élément standard
suivant un élément flottant s'affichera dans l'espace laissé par la largeur du
flottant. Ce comportement n'étant pas forcément voulu, clear a été
conçue pour préciser que cet élément ne sera pas influencé par le comportement
d'un flottant. Cette précision peut se faire sur chaque côté ou sur les deux à
la fois. clear permet de libérer l'élément de l'influence du flottant.
Tout le contenu situé entre le flottant et le libéré restera sous l'influence
du flottant.
 |
|
Même code, cette fois
avec la propriété clear:both
appliquée au dernier bloc de texte
|
Le code de la dernière image, ramené aux fondamentaux :
<style type="text/css">span { border: red
2px solid; }
div { border: blue
2px solid; }.left { border: green
5px solid; float:left; height: 10em; with: 10em; }.right { border: green
5px solid; float:left; height: 10em; with: 10em; }.clear { clear: both; }</style> <div class="left">Bloc
de texte avec un float:left</div><span>Ligne
de texte</span><div>Bloc
de texte dans un DIV</div><span>Ligne
de texte</span><div>Bloc
de texte dans un DIV</div><span>Ligne
de texte</span><div>Bloc
de texte dans un DIV</div><span>Ligne
de texte</span><div class="clear">Bloc
de texte avec un clear:both</div><span>Ligne
de texte</span>
Les meilleures astuces CSS sur le JDN :
- Comment
appliquer les CSS d'une page web au contenu d'une iframe ?
- Comment
centrer horizontalement une DIV dans une autre en CSS ?
- Comment
créer un arrière-plan (backgroud) CSS extensible et adaptable ?
- Comment
définir les cellpadding et cellspacing en CSS ?
- Comment
modifier l'image d'un bouton input en CSS ?
- Comment
rendre l'arrière-plan d'un élément semi-transparent en conservant le texte de
cet élément opaque en CSS ?
- Internet
Explorer supporte-t-il l'attribut CSS border-radius
|
