float CSS propriété détail du bug

Explication de la gestion des bugs float CSS

Définition bug float CSS

Vous trouverez ci-dessous divers bugs d'interprétation de la CSS float.
Ces bugs ont été transmis par les internautes du site.

J'ai vérifié certains bugs mais pour la plupart des bugs CSS "non vérifiés", c'est que je ne possède pas le navigateur sur lequel a été détecté le bug.
Ceux que j'ai pu visualiser sont notés :
Bug vérifié : oui.

Bug float CSS n° 1

Bug float mis par Sv1L

Système d'exploitation : windows xp
Navigateur : FireFox 2.0
Bug vérifié : oui

Problème avec float:

Quand vous avez des imbrications de div flottant, il se peut que vous ayez un petit décalage en hauteur si le div parent a un text-align à la valeur de center ou right.

Code CSS :

Exemple de code :
br {clear:left;} .unity {float:left; border:1px solid black;} .square {width:30px; height:30px;}

Code HTML :

Exemple de code :
<div class="unity" style="text-align:center;">   <div class="unity">     <div class="square unity"></div>     <div class="square unity"></div>     <div class="square unity"></div>     <br />     <div class="square unity"></div>     <div class="square unity"></div>     <div class="square unity"></div>     <br />     <div class="square unity"></div>     <div class="square unity"></div>     <div class="square unity"></div>     <br />   </div> </div>

Solution du problème par DMC :

Solution de Sv1L :
Le problème est résolu lorsque l'alignement text-align est left ou justify et de specifier l'alignement center dans la classe .square.

Solution de Dmc :
Dans ce cas précis le problème est résolu lorsque l'alignement text-align est mis sur le second div.

Exemple de code :
<div class="unity">   <div class="unity" style="text-align:center;">
Mais je ne pense pas que cela fonctionne à tous les coups.

La seconde solution qui me semble la mieux :
Est d'ajouter un overflow:hidden.

Exemple de code :
<div class="unity" style="text-align:center;overflow:hidden">   <div class="unity">

Bug float CSS n° 2

Bug float mis par Dmc

Système d'exploitation : windows xp
Navigateur : Internet Explorer 6
Bug vérifié : oui

Problème avec float:

Sous Internet Explorer, les marges droite ou gauche sont doublés sur un élément floattant.
Copie d'écran :

Code css :

Exemple de code :
#cadre1 .col1{   float:left;   width:100px; } #cadre1 .col2{   float:left;   margin-left:100px;   width:100px; }

Code HTML :

Exemple de code :
<div id="cadre1" class="cadre">   <div class="col1 bordure">col1</div>   <div class="col2 bordure">col2</div> </div>

Résultat :

col1
col2

Solution du problème par DMC :

Pour régler le problème, vous devez mettre un display:inline sur vos élément flottant.
Code css :

Exemple de code :
#cadre1 .col1{   display: inline;   float:left;   width:100px; } #cadre1 .col2{   display: inline;   float:left;   margin-left:100px;   width:100px; }

Code HTML :

Exemple de code :
<div id="cadre1" class="cadre">   <div class="col1 bordure">col1</div>   <div class="col2 bordure">col2</div> </div>

Résultat :

col1
col2

Ce cas précis est valable que si le type initiale de l'élément est de type block, comme les div ou p.
En effet si nous remplaçons les deux div par des span nous n'avons pas ce problème.

Bug float CSS n° 3

Bug float mis par Dmc

Système d'exploitation : windows xp
Navigateur : Firefox ,Netscape et Mozilla
Bug vérifié : oui

Problème avec float:

Dans netscape et mozilla dans le dernier exemple avec les quatres paragraphes, le dernier paragraphe n'est pas collé à celui du dessus.

Solution du problème par DMC :

Spécifiez un marge à 0px;
margin:0px;