Les positionnements

1. Rappels sur la propriété float
La propriété float permet la création d'habillages qui consistent à
"enrouler" un texte autour d'un élément (graphique ou texte).

Un élément flottant est ôté partiellement du flux et placé à l'extrême gauche (float:left) ou droite (float:right) de son conteneur, forçant par la même occasion tout contenu du flux qui suit à l'envelopper. Deux objets flottants dans la même direction se rangeront côte à côte.
La propriété clear s'utilise conjointement aux float et permet à un élément (qui peut être d'ailleurs lui-même flottant) de ne plus subir le comportement d'habillage dicté par un objet flottant qui le précède directement et, par conséquent, de se caler en-dessous de ce dernier. Le clear autorise un nettoyage des flottants exclusivement à gauche (clear:left), à droite (clear:right) ou les deux simultanément (clear:both).

Exemple :
<body>

style>

<h2> Bill Gates </h2>

#image {

<div id="image">
<img src="Gates.png" alt="Bill Gates">
</div>
<p class=floatstop>
William Henry Gates III, dit « Bill » Gates, est un informaticien et un entrepreneur américain, …

float:left;
}
.floatstop { clear:both; }
</style>

</p>
</body>

F. Abouzaid

Page 1

2. Positionnement : la propriété display
Une page HTML est perçue par défaut en deux dimensions (largeur [x] et hauteur [y]) mais la troisième dimension (la profondeur [z]) est aussi présente sur toutes les pages html.
Le positionnement des éléments d'une page html peut être précisé par la propriété CSS «position:».
Ce qui causera un effet de décalage (écarts) ou d'empilage (mêmes positions) ou de superpositions
(complètes, partielle, côte-à-côte).
Cette propriété fait partie des propriétés de la catégorie de mise en page «Layout» qui permettent de choisir parmi des propriétés de contrôle tels que la visibilité (display), la position (position) et le comportement (float, clear, top, left, right, bottom, z-index) des boîtes des éléments.
La propriété position permet de