Discussion :

[GxiGlon]

Bonjour à tous,

Petite chose CSS qui m'intrigue depuis quelques temps et que je n'ai pas réussi à m'expliquer : pourquoi, dans cet exemple, la marge supérieure du bloc .bar n'est-elle pas prise en compte, bien que le flux ai été réinitialiser ?

La seule solution que j'ai trouvée pour solutionner le souci est d'effectuer la réinitialisation du flux sur un élément intermédiaire avant le bloc .bar.

Je suis donc curieux de connaître le pourquoi de ce comportement

Merci par avance.

[rodolphebrd]

Bonjour,

Effectivement même si vous effectuez un clear le margin-top de l'élément n'agit pas.
La solution est de créer un conteneur sur lequel on peut appliquer une bordure transparente.

Je préfère utiliser le pseudo-élément :after appliqué au conteneur pour obtenir ce résultat.

[Muchos]

Ca me semble être un problème de fusion des marges.

Personnellement, je n'ai pas su résoudre votre problème sans faire le clear:left autrement.

EDIT: désolé. Un camarade a répondu avant moi (et mieux que moi je pense) ^^

[Candygirl]

Hello,

Ton margin est bien pris en compte seulement ta configuration ne permet pas d'en voir l'effet pour 2 raisons:

- Vu que le contenu des flottants d'écoule en dehors du flux normal, ton margin est appliqué depuis l'endroit logique actuel du flux, soit tout en haut de ta page. Vu que le contenu de tes flottants est plus haut que tes 20pixels, tu n'en vois pas les effets.

Si tu donnes une valeur plus élevée (par exemple, 500px), tu devrais commencer à en voir les effets. Sauf que...

- Le margin-top de .bar fusionne avec le body, raison pour laquelle tu ne le visualiseras toujours pas (même avec une valeur de 500px), à moins d'ajouter, par exemple un body {border:1px solid red;} pour empêcher la fusion.

[GxiGlon]

Merci à vous 3 pour vos réponses.

Je vais répondre en détail à CandyGirl :

Hello,

Ton margin est bien pris en compte seulement ta configuration ne permet pas d'en voir l'effet pour 2 raisons:

- Vu que le contenu des flottants d'écoule en dehors du flux normal, ton margin est appliqué depuis l'endroit logique actuel du flux, soit tout en haut de ta page. Vu que le contenu de tes flottants est plus haut que tes 20pixels, tu n'en vois pas les effets.

Hum, je pensais en fait que le fait de mettre un clear sur l'élément .bar aurait du réinitialiser le flux et rendre effectif la marge. Et en effet, en réalité le flux doit être réinitialisé sur les éléments flottant et non sur les éléments qui suivent : http://cdpn.io/Jafzh.

Est-ce que cela signifie qu'un clear sur un élément réinitialise le flux à partir de la bordure et non pas à partir de la marge externe ?

Si tu donnes une valeur plus élevée (par exemple, 500px), tu devrais commencer à en voir les effets. Sauf que...

- Le margin-top de .bar fusionne avec le body, raison pour laquelle tu ne le visualiseras toujours pas (même avec une valeur de 500px), à moins d'ajouter, par exemple un body {border:1px solid red;} pour empêcher la fusion.

Ouep, j'avais bien noté ce point

[Candygirl]

Hum, je pensais en fait que le fait de mettre un clear sur l'élément .bar aurait du réinitialiser le flux et rendre effectif la marge.

La recommendation css2.1 définit ainsi la propriété clear:

Clear
This property indicates which sides of an element's box(es) may not be adjacent to an earlier floating box. The 'clear' property does not consider floats inside the element itself or in other block formatting contexts.

Clear
Cette propriété indique quels côtés d'une ou des boîtes d'un élément ne doivent pas être adjacents à une boîte flottante précédente. (Il peut arriver que l'élément lui-même ait des descendants flottants, la propriété 'clear' n'a alors aucun effet sur eux).

Et en effet, en réalité le flux doit être réinitialisé sur les éléments flottant et non sur les éléments qui suivent : http://cdpn.io/Jafzh.

J'ai aps trop compris ce que tu cherches à montrer avec ton exemple. Là, tu fais ton clear sur le pseudo element :after, pas sur ton élément flottant. C'est donc bien "un élément qui suit".

Là, le margin de .bar est appliqué depuis le pseudo-element :after, puisque le flux se situe à son niveau, qui remplit exactement le même office qu'un div vide affublé d'un clear.