Discussion :

[laurentSc]

Bonjour,

je suis parti d'un code de jreaux62 que j'ai fortement dégraissé, le but étant de faire une mise en page simple dont l'aspect est similaire à ce qu'on obtenait autrefois avec les balises <table>, <tr> et <td>.

J'y suis parvenu mais il y a une propriété CSS indispensable (content)(si on l'enlève, l'affectation de la largeur des 2 blocs n'est plus possible) et je ne trouve pas l'explication. Peut-on m'expliquer ?

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
 
 
<main>
 
 
  <section class="table clearfix">
    <div class="table-cell" id="boite1">boite 1
    </div>
    <div class="table-cell" id="boite2">boite 2
        </div>
 
   <!-- <div class="cboth"></div>-->
 
    </div>

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
 
/* permet de remettre dans le flux les blocs flottants */
.clearfix:before, .clearfix:after { /*display:table;*/ content:""; }
/*.clearfix:after { clear:both; }*/
 
 
/* TABLE */
.table {
  display: table;
  width: 100%;
}
.table-row {
  display: table-row;
}
.table-cell {
  display: table-cell;
  vertical-align:top;
}
 
 
 
#boite1, #boite2 {
  width:20%;
}
 
 
 
 
/* -------------------------------------- */
/* déco (facultatif) */
 
#boite1, #boite2
   {
  padding:2%;
  border: 1px dashed #ccc;
  background: #f6f6f6;
}

http://codepen.io/laurentsc/pen/jygzXz

[Invité]

Laisse clearfix tel quel, au lieu de jouer aux apprentis sorciers.....

[laurentSc]

OK

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
 
/* permet de remettre dans le flux les blocs flottants */
.clearfix:before, .clearfix:after { display:table; content:""; }
.clearfix:after { clear:both; }
 
 
/* TABLE */
.table {
  display: table;
  width: 100%;
}
.table-row {
  display: table-row;
}
.table-cell {
  display: table-cell;
  vertical-align:top;
}
 
 
 
#boite1, #boite2 {
  width:20%;
}
 
 
 
 
/* -------------------------------------- */
/* déco (facultatif) */
 
#boite1, #boite2
   {
  padding:2%;
  border: 1px dashed #ccc;
  background: #f6f6f6;
}

mais cela dit, ça m'embête de l'utiliser sans comprendre (même si je suis très lent, je cherche quand même à apprendre). Peux-tu m'expliquer le rôle de clearfix ?

[Invité]

C'est écrit dessus :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

/* permet de remettre dans le flux les blocs flottants */

Et en faisant une simple RECHERCHE, tu aurais trouvé de nombreuses explications...

Il y a aussi la FAQ CSS : Comment faire pour qu'un conteneur englobe ses enfants flottants ?

clearfix est souvent présenté comme un "hack", or il n'a rien de "malveillant".
C'est juste un "fix", permettant de "corriger" un comportement (-> remettre dans le flux les blocs flottants).

N.B. Tu n'a pas besoin de "comprendre" pour l'utiliser.
Mets cette classe "clearfix" sur le parent des élements en position float, et POINT BARRE.


CELA DIT (et maintenant que j'ai regardé ton codepen !), TU N'AS PAS d'éléments FLOAT dans ton code !!!!!!!
Tes éléments sont en display:table/table-cell !!!

[laurentSc]

En effet, y a pas d'éléments flottants, mais ce code fonctionne avec la propriété content (indispensable) ; donc je la mettrai sans me poser de question...