boîtes flottantes (propriété « float »)

Voir un modèle de boîtes flottantes.

Remarques :

• « Quand vous définissez pour un élément une mention sur float (cours du texte) vous devez définir aussi une mention sur width (Largeur) » – dixit selfhtml…
  note : « width » peut être réglé sur « auto ».
• Pour que le bloc contenant les boites flottantes englobe graphiquement (vérifier avec une bordure par ex.) tout son contenu :
  • il suffit qu’un objet quelconque avec la propriété clear: both vienne à la suite des blocs flottants dans le même bloc contenant
  • ou que le bloc contenant ait la propriété overflow: hidden

  il est utile de lui attribuer la propriété overflow: hidden;.

clear (suite pour le cours du texte)

Avec clear : on peut interrompre le cours du texte pour en forcer la poursuite sous l’élément/le passage entouré. Les données suivantes sont possibles :

clear: left impose pour float: left la poursuite en dessous.
clear: right impose pour float: right la poursuite en dessous.
clear: both impose dans chaque cas la poursuite dessous.
clear: none n’impose pas de poursuite dessous. (réglage normal).

Un exemple

le css :

#conteneur {
	padding: 5px;
	background: #F8F8F8;
	border: 1px solid #666666;
	width: 380px;
	overflow: hidden; /* étend la hauteur du bloc pour contenir tous les blocs flottants */
}
.float {
	width: auto; /* mention width indispensable si mention float présente */
	background: #FFFFFF;
	border: 1px solid #000000;
	float: left;
	padding: 5px;
	margin: 2px;
}

le html :

<div id="conteneur">
	<div class="float">bloc flottant</div>
	<div class="float">bloc flottant</div>
	<div class="float">bloc flottant</div>
	<div class="float">bloc flottant</div>
	<div class="float">bloc flottant</div>
	<div class="float">bloc flottant</div>
	<div class="float">bloc flottant</div>
</div>