Comment fonctionne le clearing CSS?

Question

J'ai un <div> que je veux être sur une ligne à part. Selon W3Schools , cette règle:

div.foo {
  clear: both;
}

... devrait signifier ceci:

  

& "; Aucun élément flottant autorisé à gauche ou à droite. &";

Cependant, si je laisse deux "clear: left" éléments à la mer et que je règle la règle ci-dessus au premier, le second ne bouge pas.

D’autre part, si j’applique clear à la seconde <=>, elle passe à la ligne suivante. C’est mon approche habituelle, mais je ne comprends pas pourquoi je dois le faire comme ça.

La description ci-dessus de W3Schools est-elle mal énoncée ou manque-t-il quelque chose? Une règle de rapprochement ne peut-elle déplacer que l'élément auquel elle est appliquée?

Répondre

Merci Michael S et John D pour les bonnes explications. Warren a souligné la spécification CSS2 , et c'est là que j'ai trouvé cette réponse (c'est moi qui souligne) :

  

Cette propriété indique quels côtés de la ou des boîtes d'un élément peuvent ne pas être adjacents à une boîte antérieure .

.

Ainsi: <=> n'affecte que la position de l'élément auquel il est appliqué, par rapport aux éléments qui apparaissent avant le code.

Décevant de ne pas pouvoir dire à mon <=> forcer d'autres divs à descendre, mais ce sont les pauses. :)

Answer 1

Lorsque vous appliquez une suppression à un élément, il déplacera cet élément afin qu’il ne comporte plus d’éléments. Il ne repositionne aucun des autres éléments, il le déplace simplement dans une position où rien ne l’entoure.

Modifier

Les éléments situés au-dessus de l’élément effacé ne sont pas déplacés, les éléments situés sous l’élément POURRAIENT être déplacés. Notez également le commentaire supplémentaire dans les commentaires

Answer 2

Votre css analyse & "correctement". & "; Votre deuxième div est toujours flottante à gauche, donc même après avoir effacé la première, s'il reste de la place dans le sens de la largeur pour la seconde, elle restera flottante au point le plus haut possible.

Answer 3

Oui, l'effacement ne déplace que l'élément auquel il est appliqué. Cependant, le résultat est différent selon que l'élément est & "; Dans le flux &"; ou hors de flux. Je suppose que cela vous déroute.

Si l'élément est en flux, l'effacement le déplace avec tout ce qui suit. Imaginez que la position actuelle du stylet (l'emplacement où l'élément suivant doit être placé) soit déplacée vers le bas. Ce comportement est facile à comprendre.

Si l'élément est hors de flux, comme le float de votre exemple, seul l'élément est déplacé, la position du stylet reste au même endroit, à moins que d'autres règles ne le déplacent. Par exemple, un float ne peut pas démarrer au-dessus d'un float précédent.

Il existe également un problème complexe de réduction des marges. Le nettoyage les interrompt, parfois de manière peu intuitive.

Answer 4

Vous appliquez clairement à l'élément souhaité sur une nouvelle ligne. La clarté que vous utilisez dépend des éléments que vous ne voulez pas toucher. Si vous voulez que l'image B apparaisse sur une nouvelle ligne et ne touchez pas l'image A (ce qui veut dire que c'est float: left), vous devez mettre Image B comme {clear: left} pas bien à droite comme vous le pensez naturellement. Vous effacez le flottant de l'élément précédent.

Answer 5

Je fais généralement ce qui suit pour cet effet:

float: left;
clear: right;

Je ne sais pas si cela s'applique uniquement à l'élément auquel il s'applique, bien que cela ait un sens.

Les spécifications sont disponibles ici, cependant: http://www.w3.org/ TR / REC-CSS2 /