[Résolu] Float, clear... perdu!

Au secours, je ne comprends pas la logique de cette page de tests:
http://tests.osirisnet.net/migration/outils/float-tests.html

Merci de votre aide

Diminue un peu la largeur de ta fenêtre, c'est pas très probant autrement.

Bonsoir !

Tous les éléments qui sont en "float : left" ou "float : right", je pense que je comprends. Ils vont se caler à gauche ou à droite selon la valeur, les paragraphes prennent la totalité de leur contenant vu qu'ils n'ont pas de largeur définie... Et vous alternez gauche, droite, gauche... sauf vers la fin.

Moins clair est le clear... Mais le paragraphe en "clear : both" a le comportement attendu si vous enlevez "display : inline" aux paragraphes...

Zelena a écrit :
Bonsoir !

Tous les éléments qui sont en "float : left" ou "float : right", je pense que je comprends. Ils vont se caler à gauche ou à droite selon la valeur, les paragraphes prennent la totalité de leur contenant vu qu'ils n'ont pas de largeur définie... Et vous alternez gauche, droite, gauche... sauf vers la fin.

Moins clair est le clear... Mais le paragraphe en "clear : both" a le comportement attendu si vous enlevez "display : inline" aux paragraphes...

Les paragraphes en inline sont bien entendu volontaires, c'est très exactement ce se passe dans mon site.
Je pensais que si je mettais un clear all sur le 3ème paragraphe, il allait très gentiment se mettre au dessous, mais non, il se met au dessus!
Par contre si le mets un <br class="clear"> avant le paragraphe (en gardant ou en en supprimant le clear du paragraphe) j'obtiens le résultat souhaité: le paragraphe se met bien au dessous, voir http://tests.osirisnet.net/migration/outils/float-tests2.html
Mon problème n'est donc pas de trouver une solution, car en fait j'en ai au moins deux: le <br class="clear"> ou bien mettre chaque partie de la page dans une section étanche, en jouant sur la propriété overflow, ce qui est structurellement la solution que je choisis dans le site réel.
Mais j'aimerais comprendre le pourquoi de ce comportement étrange...
Merci de vos lumières!
Modifié par PapyJP (16 Aug 2016 - 23:12)

Hello,

Je suis sur smartphone en 2g et je n'ai pas moyen de tester la page en question.

Je précise toutefois que la propriété clear ne s'applique pas sur un élément inline. La réponse est peut-être là ?

Bonne journée

Bonjour PapyJP,

Le comportement est très logique.
Il faut prendre en considération la notion de flux et surtout le fonctionnement un peu particulier des flottants.

Dans l'ordre d'apparition dans le DOM :
- figure (float left) : hors flux, se cale à gauche.
- p (float right) : hors flux, se cale à droite. Le contenu étant plus large que l'espace vacant, se place en dessous.
- figure (float right) : hors flux, se cale à droite. Le paragraphe précédent prenant toute la place, se place en dessous.
- p (float left) : hors flux, se cale à gauche. Le contenu étant plus large que l'espace vacant, se place en dessous.
-p (clear both) : dans le flux (le clear ne sert à rien sur cet élément) et se place donc dans le premier espace vacant du flux. Donc tout en haut à coté de l'image.
- figure (float left) hors flux, se cale à gauche. Le paragraphe précédent prenant toute la place, se place en dessous.

Merci pour cette explication très claire. Je vais mieux dormir cette nuit!