display : Float

Il est parfois difficile de comprendre les conséquences de la modification de la valeur d'une propriété.

Nous proposons des animations pour comprendre le résultat obtenu.
Pour chaque animation nous partons de la situation suivante.

Situation de départ

le code HTML est

<div id="a"> Bloc A </div>
<div id="b"> Bloc B </div>
<div id="c"> Bloc C </div>

Le code CSS est

div {
    border: 2px dotted black;
    margin :2px;
}

Modifications

Float left

Une modification est apportée au CSS. le bloc "#a" passe en position  flottante.

#a{
    float:left;
}

action

Les trois blocs sont contenus dans un div de taille fixe.

Nous fixons la taille du conteneur
                                                  taille < taille(a+b+c)

Modification du html

<div id="conteneur">
    <div id="a">
    <div id="b">
    <div id="c">
<div>

Modification du CSS

#conteneur {

    width: 250px;

}

div{
    ...    float:left;    
}

En action

Autre cas

#a,#c{
    float:left;
}

action