28172 sujets

CSS et mise en forme, CSS3

[Résolu] Problème de float

Bonjour

Cela fait plusieurs heures que j’essaie de résoudre un problème qui doit être évident mais que je ne vois pas.

Je n'arrive pas à comprendre ce qui ne marche pas dans http://paralletes.free.fr/tests/test-break.html
Pourquoi le "Sous-tire 2" n'est il pas cadré à gauche malgré le "clear:both" qui fait partie du style h2?

Merci de votre aide
Bonjour,
je pense que c'est parce que le h2 avec la propriété clear n'est pas un voisin du flottant. Si tu mets le clear sur la balise <p>, le <p> passe à la ligne.

Pour obtenir ce que tu cherches, mets un overflow auto ou hidden sur le conteneur du flottant.
Modifié par loicbcn (03 Jul 2015 - 10:55)
Merci beaucoup de ta réponse

overflow:auto a l'air de marcher, mais ça n'explique rien.

Le <h2> est en dehors de cette division, je ne comprends pas la logique de ce comportement.

Je ne suis pas simplement en train de faire quelque chose qui marche, j'essaie de m'en servir pour expliquer à quelqu'un ce qu'il faut faire pour avoir une présentation correcte sans bidouiller à chaque endroit, comme il le fait actuellement.. J'aimerai bien avoir une explication autre que "c'est comme ça".
loicbcn a écrit :
Le clear fonctionne lorsqu'il s'agit de voisins, ton h2 n'est pas voisin du flottant ...

Regarde là:
http://www.alsacreations.com/article/lire/7-depassement-flottants-css.html


Merci de cette "explication", qui n'en est pas une.

Ce que je vois sur cet exemple, c'est une div dont rien ne dépasse et une propriété "float" qui a l'air de se propager sur la balise suivante. Laquelle balise dit explicitement qu'elle veut se mettre dans le flot, mais à mon sens le "clear:both" est de toute façon de trop.

Tout se passe comme si le <h2> était inclus dans la <div>, ce qui n'est pas le cas.
Y a-t-il un moyen simple et explicable à un humain normalement constitué d'empêcher une telle contamination?

Pour l'instant j'ai mis dans la feuille de style un "div:overflow:auto;" pour donner l'impression qu'il y a une logique, mais sur le fond ça ressemble plus à une correction d'effet de bord qu'à un comportement logique.
Modifié par PapyJP (03 Jul 2015 - 13:08)
connecté
Modérateur
Bonjour,


loicbcn a écrit :
Le clear fonctionne lorsqu'il s'agit de voisins, to h2 n'est pas voisin du flottant

Je suis désolé PapyJP mais loicbcn a raison est est très clair. Tente de mettre un clear:both; sur le <p> voisin du <dic class=left"> tu verras qu'il fonctionne bien (car il est directement voisin).

PapyJP a écrit :
Tout se passe comme si le &lt;h2&gt; était inclus dans la &lt;div&gt;, ce qui n'est pas le cas.
Visuellement peut etre mais ce qui compte pour une machine c'est le DOM hein...
Le <h2> est voisin du <div> qui contient le <div class="left">
L'utilisation du float fait sortir l’élément du flux, son parent ne l'intègre donc pas dans sa hauteur. Le h2 se place donc en dessous de son voisin. Indépendamment, le bloc en float qui est sorti du flux pousse tout ce qui traine (voisin ou pas).

PapyJP a écrit :
Y a-t-il un moyen simple et explicable à un humain normalement constitué d'empêcher une telle contamination?
- Donner une hauteur min au <p> de la taille du float,
- Donner une hauteur min au parent
- (ma préférée) Ne pas utiliser les float
Modifié par _laurent (03 Jul 2015 - 13:53)
Administrateur
Bonjour,

même conseil que loicbcn pour la solution Smiley smile
Ou un clearfix sur ce même parent, je crois.
edit: ou float: left; sur le parent

La cause est relativement complexe à expliquer et est à base de BFC.
h2 avec son inline-block crée un contexte de formatage (BFC) mais c'est indépendant de celui présent avec float: left;
EDIT: mmh 2e discussion avec Raphaël et il se trouve que float: left; et clear: both; sur h2 a bien l'effet demandé mais pas inline-block. Il y a donc une histoire de BFC et de flottants. Par ce temps de canicule, je vais pas tout de suite me replonger dans la spec Smiley sweatdrop
Modifié par Felipe (03 Jul 2015 - 14:42)
@laurent
Merci de ta réponse.
Pour moi ton explication est très claire: elle explique que la spec CSS3 est buggée, mais bien sûr c'est une opinion personnelle, je ne voudrais surtout pas relancer une discussion antérieure où je me suis fait traiter de tous les noms, donc considérez que cette phrase n'a pas été écrite!!! Smiley cligne
_laurent a écrit :

- (ma préférée) Ne pas utiliser les float

Connais tu une autre façon d'avoir le même résultat visuel sans un float sur la div qui contient l'image et sa "caption"? Si oui je suis preneur de grand cœur.
Felipe a écrit :
Par ce temps de canicule, je vais pas tout de suite me replonger dans la spec Smiley sweatdrop

Excellente remarque! J'ai eu beau fermer fenêtres et volets dans un logement bien isolé, j'en viens à regretter le temps où je travaillais dans un bureau climatisé.

Si j'ai bien compris, mon objectif d'expliquer des choses simples à des utilisateurs non experts est inatteignable.
D'après les Shadocks, "s'il n'y a pas de solution c'est qu'il n'y a pas de problème"
Pensée plus profonde qu'il n'y parait...

Moyennant quoi je crois que je vais ouvrir un nouveau fil sur un domaine voisin: comment faire simplement des choses simples.
Administrateur
Bonjour.

En fait non, la spec n'est pas bugguée, mais Philippe er moi avions simplement oublié un détail important: la propriété clear ne s'applique pas sur un inline ou inline-block (il faut que l'élément soit block ou hors flux). Donc ici ton clear sur h2 n'a tout simplement aucun effet.

Conclusion : créer un BFC sur le parent du float (overflow hidden par ex) pour "contenir" son float. Tu n'auras alors plus besoin de clear sur h2.

PS : ici en l'occurrence il ne s'agit pas de spec CSS3 mais de la bonne vieille CSS1 Smiley cligne

PS2: oui on peut très bien appliquer un clear pour passer sous un float qui n'est *pas* un frère, il suffit que les deux éléments soient dans le même contexte BFC (la spec n'est pas bugguée mais... tordue Smiley langue )

PS3: ton choix de float est pertinent ici. Tu aurais pu atteindre un résultat identique, en CSS3 cette fois, via flexbox : display: flex sur le parent et flex:1 sur le "caption"
Modifié par Raphael (04 Jul 2015 - 06:50)
Merci Raphaël
En me référant à ton excellent article qui me sert de référence, j'avais compris qu'un h2 était un bloc, j'ai simplement oublié que je l'avais mis inline dans mon CSS.
Le bug est là. C'était sous les yeux et je ne voyais pas (ce qui est le cas de la plupart des bugs). A ma décharge personne avant toi n'avait mis le doigt dessus.

Quant à savoir si une spec est buguée, c'est sans grande importance, elle est comme elle est. La spec (si on peut appeler "spec" une chose qui n'est que la description de l'existant) du système de mesures anglo-saxonnes n'est pas buguée, elle est simplement délirante (ou tordue si tu préfères)....
Encore heureux quand une spec tordue est implémentée de façon cohérente par tout le monde... ce n'est pas le cas de flexbox. C'est très certainement la bonne solution à beaucoup de problèmes, mais dans la situation présente c'est se mettre dans des situations ingérables avec des utilisateurs de mon âge qui changent de PC tous les 10 ans et ne mettent pas leurs navigateurs à jour. Depuis que j'ai décidé de passer mes sites en HTML5, j'ai des effets de bord catastrophiques avec certains.

PS pour mon instruction, c'est quoi un BFC? Ça ne fait pas (encore) partie de mes TLA.
Administrateur
PapyJP a écrit :
PS pour mon instruction, c'est quoi un BFC? Ça ne fait pas (encore) partie de mes TLA.

Le BFC est grosso-modo un "contexte" permettant de résoudre 90% de tes problèmes de flottants. Bref, c'est tout simplement un incontournable.

Encore un peu de lecture pour ce week-end : http://www.alsacreations.com/astuce/lire/1543-le-contexte-de-formatage-block-en-css.html Smiley cligne

PapyJP a écrit :
si on peut appeler "spec" une chose qui n'est que la description de l'existant

C'est sans doute un peu plus complexe que cela. Une spec est rédigée par les acteurs du Web (Microsoft, Mozilla, Apple, Google, etc.)... et n'aboutit que si tous les acteurs trouvent un consensus. Tu te doutes qu'au vu des enjeux économiques, c'est pas toujours gagné Smiley cligne
Modifié par Raphael (05 Jul 2015 - 09:50)
Merci
Très bien cet article.

Ah oui!
J'ais mis mes h2 en inline pour les encadrer, car sinon ils prennent toute la ligne.
Je serais preneur d'un meilleur moyen de faire ça si ça existe.

Sémantiquement il s'agit bien d'un h2, du point de vue flot c'est bien un bloc, du point de vue visuel, le fond et le cadre doivent se limiter au texte. Je pourrais m'en tirer en mettant le texte dans une balise inline à l'intérieur du h2, mais ça me semble lourd, car il faudrait la répéter à chaque titre de paragraphe.
Raphael a écrit :
Tente un float sur le h2

Pas sur d'avoir compris. J'ai mis 
h2{
               display:inline-block;
               color:#990000;
               background-color:#FFCC00;
               text-transform: uppercase;
               font-size:90%;
               border:1px solid #990000;
               padding:2px 5px;
           }

Est-ce que tu proposes

h2{
              /* display:inline-block;*/
               float:left;
               color:#990000;
               background-color:#FFCC00;
               text-transform: uppercase;
               font-size:90%;
               border:1px solid #990000;
               padding:2px 5px;
           }

???
Tu me diras que je n'ai qu'à essayer...
Edit: ... et tu aurais raison car c'est effectivement ce qui marche.
J'espère qu'il n'y aura pas d'effet de bord
Edit2: ... mais ça a des effets de bord à d'autres endroits
Modifié par PapyJP (05 Jul 2015 - 10:45)
Administrateur
Je ne connais malheureusement pas ton contexte.
Il y a d'autres moyens de faire fonctionner ton clear sur h2.
Tu peux aussi essayer display table à la place de float left, c'est un peu comme un display block mais en conservant la taille du contenu et non toute la place disponible.
Sujet clos
Aller à