SOMMAIRE

L'élément flottant présente un alignement vertical incohérent avec l'élément non flottant adjacent, cette variabilité est soumise à la valeur border-top-width et à la valeur overflow du conteneur ou de l'élément parent. Qu'est-ce qui donne?


Contexte

Je suis tombé sur cette situation alors que je pratiquais avec une mise en page comportant des éléments <img>. Je viens de commencer à apprendre le HTML / CSS par moi-même le mois dernier, alors faites-moi un peu la leçon si cela est dû à quelque chose de fondamental que j'ai ignoré.

Détails

Il y a un élément flottant et un élément bloc non flottant dans un conteneur <div>.

L'élément flottant (p1) a une largeur fixe et une marge 0. Il flotte dans les deux sens gauche / droite. C'est l'élément flottant de départ (c'est-à-dire le premier en ligne à flotter sur le côté de la boîte contenant).

L'élément adjacent (p2) est un bloc non flottant qui s'enroule autour de p1. Notez qu'une valeur de marge non nulle est spécifiée à dessein pour p2 ici afin de montrer que p1 et p2 ne sont pas alignés dans l'un des scénarios expliqués ci-dessous.

L'élément conteneur <div> a 0 remplissage.

Avec cette configuration, j'ai trouvé qu'il y a au moins deux façons dont l'élément flottant (p1) peut se positionner par rapport à border-top-width et overflow:

  1. L'élément flottant (p1) s'aligne avec l'élément non flottant adjacent (p2) (c'est-à-dire que la bordure supérieure de la boîte p1 s'aligne avec la bordure supérieure de la boîte p2).

    Règles CSS:
    div {border-top-width: 0px;}
    et
    div {overflow: visible;}

  2. L'élément flottant (p1) s'aligne à la place sur la bordure supérieure de la boîte contenant ou l'élément parent.

    Règles CSS:
    div {border-top-width: non-0px;}
    ou
    div {overflow: auto/hidden/scroll/}

Notez que dans le cas 2 , l'une ou l'autre règle suffit à elle seule pour activer l'alignement.

Code

Le code, trop simplifié, ressemblerait à ceci:

HTML

<div>
    <img src="example.jpg">
    <p>Random text</p>
</div>


CSS

img {
    float: left;
}

/* floating element aligns with adjacent element */

div {
    border: none;
    overflow: visible;
}

Ou

/* floating element aligns with top border of container */

div {
    border-top-width: 1px;
    overflow: auto;
}


J'ai mis en place un exemple sur jsfiddle: https://jsfiddle.net/tLumj9x7/

Ou vous pouvez le vérifier avec l'extrait ci-dessous:

/* <body>, <div> margin set to 0 to avoid interference  */
body {
  margin: 0px;
}

div {
  margin: 0px;
}

/* border drawn above the paragraphs to denote top border of 2nd <div> */
.div1 {
  border-bottom: 1px solid;
}

p {
  border: 1px solid;
}

/* floating paragraph: margin set to 0 to highlight unusual alignment */
.p1 {
  float: left;
  margin: 0px;
  width: 400px;
}

/* note that a <p> element has a default margin of 1em, so this declaration is just for demonstration */
.p2 {
  margin: 16px;
}

input#border:checked~div.div2 {
  border-top: 0.02px solid transparent;
}

input#overflow:checked~div.div2 {
  overflow: auto;
}
<form>
  <input type="checkbox" name="border" id="border" />container border-top-width: non-0<br />
  <input type="checkbox" name="overflow" id="overflow" />container overflow: auto / hidden/ scroll<br />
  <div class="div1">
  </div>
  <div class="div2">
    <p class="p1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </p>
    <p class="p2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
  </div>
</form>


Des questions

  1. Comment exactement la position d'un élément flottant de départ est-elle déterminée par rapport à son élément conteneur (dans notre cas le bloc <div>)?

  2. Qu'est-ce que la propriété border-top-width a quelque chose à voir avec "l'ancrage" de l'élément flottant qui fixe?

  3. Idem avec la propriété overflow. En termes de propriétés, comment overflow influence-t-il "structurellement" la boîte conteneur?

  4. Des deux scénarios ci-dessus, qui montre un positionnement «par défaut» pour l'élément flottant de départ, le cas échéant?

  5. Sur une note différente mais liée. Si je place une marge autour de l'élément flottant p1 qui flotte à gauche, sa marge gauche se réduit avec la marge gauche de l'élément non flottant p2 adjacent. Est-ce un comportement standard? J'ai lu que la marge des éléments flottants ne s'effondre pas, donc je ne suis pas sûr d'avoir bien compris le concept.

C'est mon premier article sur stackoverflow, alors merci d'avoir lu ma question! Je suis assez nouveau dans le développement Web et j'ai hâte de lire vos réponses.

2
Daniel 25 avril 2020 à 06:10

2 réponses

Meilleure réponse
  1. Une boîte flottante sera placée verticalement au niveau de l'endroit où la boîte aurait été si elle n'avait pas été flottée. Dans le cas ici, où il s'agit du premier élément de son conteneur, son bord supérieur coïncide avec le haut de la boîte de contenu de son conteneur. (La différence d'effet que vous voyez est que la boîte de contenu du conteneur div se déplace de haut en bas.)

  2. Dans le cas initial, p1 est flottant et donc hors de flux donc rien n'empêche la marge verticale de p2 de s'effondrer avec ses ancêtres. La présence d'une bordure supérieure de largeur différente de 0 signifie que la marge supérieure de p2 n'est plus adjacente à la marge supérieure de l'élément div (c'est-à-dire qu'elles sont séparées par la bordure), de sorte que les marges ne peuvent pas se réduire ensemble.

  3. Un effet secondaire du overflow:auto est qu'il amène le div à établir un contexte de formatage de bloc. Les marges des descendants d'un contexte de mise en forme de bloc ne se réduiront pas avec les marges de l'élément qui établit le contexte de mise en forme de bloc. Une manière plus directe, mais plus récente, d'amener le div à établir un contexte de formatage de bloc est de lui donner le paramètre display:flow-root.

  4. Par défaut, les marges verticales adjacentes des boîtes de bloc en flux se réduisent. Ainsi, la marge supérieure par défaut de l'élément p (p2) se réduit avec les marges supérieures des éléments div et body, augmentant la marge au-dessus du haut de la zone de contenu de l'élément div et poussant ainsi l'élément flottant plus bas.

  5. Réduire les marges affecte les marges verticales. Avec les marges horizontales, ce que vous voyez n'est pas un effondrement des marges, mais un effet différent. p1 et p2 se chevauchent. p2 ne s'enroule pas exactement autour de p1, son contenu le fait. Ce qui se passe, c'est que p2 est constitué d'une pile de boîtes de lignes. Le bord gauche de chaque boîte de ligne qui est à côté de p1 coïncide avec le bord de la marge droite de p1. La marge gauche de p2 touche toujours le bord gauche de la zone de contenu de la div contenant, exactement comme elle n'était pas du tout là, donc cela n'affectera pas la position du bord gauche de ces zones de ligne à moins que la marge gauche, la bordure et le remplissage de p2 ne soient supérieure à la largeur de la zone de marge de p1.

1
Alohci 26 avril 2020 à 11:09

Essayer de répondre à mes propres questions sur la base de la réponse d'Alochi pour voir si j'ai bien compris les idées. Merci, Alochi!

  1. Essentiellement, si une boîte flottante est le premier élément de sa conteneur, son alignement vertical se comporte comme son non-flottant l'équivalent serait dans son conteneur (moins l'effondrement de la marge). Autrement dit, le bord supérieur extérieur de la boîte flottante (en fonction de son margin, border), coïncide avec le bord du contenu du bloc conteneur (c'est-à-dire l'élément parent).

  2. Dans le cas de savoir si border-top-width a une valeur 0 ou non, le le positionnement de la boîte flottante est en fait cohérent, en ce sens le bord supérieur extérieur coïncide avec le bord du contenu de son contenant bloquer. La différence est: 1) Avec l'absence de bordure autour du bloc contenant (son border-top-width étant 0), la marge du bloc non flottant adjacent au bloc flottant (p2 dans notre cas), se réduit avec la marge du bloc conteneur, indépendamment de si le conteneur margin est 0 ou non, laissant un visuel l'impression qu'un bloc flottant sans marge est aligné avec son élément non flottant adjacent; 2) Avec un border-top-width de non-0 autour du bloc conteneur, le bord supérieur de la marge non flottante bloc coïncide avec le bord supérieur du contenu du bloc conteneur, car la présence d'une bordure autour du conteneur sépare son marge de celle de ses descendants, laissant une impression visuelle qu'un bloc flottant sans marge est aligné avec le conteneur, plutôt qu'avec le bloc non flottant adjacent.

Merci pour cette clarification. C'est aussi ainsi que j'ai tenté à l'origine de rationaliser le comportement d'alignement. Depuis, j'ai creusé plus profondément et trouvé les règles régissant le positionnement des flotteurs ici . La règle n ° 8 stipule qu '"une boîte flottante doit être placée aussi haut que possible", tandis que la règle n ° 4 stipule que "le haut extérieur d'une boîte flottante ne doit pas être plus haut que le haut de son bloc contenant".

  1. Dans le cas de overflow, si sa valeur n'est pas visible, donc création d'un contexte de mise en forme de bloc pour la mise en page de l'élément enfants (conformément à ces règles de contexte de mise en forme), la marge de tout élément enfant positionné en haut ne peut pas s'effondrer avec celle du conteneur (selon les règles de réduction des marges ), comme si le premier est contenu dans le bord du contenu du conteneur.

Merci pour le conseil sur le contexte de formatage de bloc! Je n'étais pas au courant du concept. Je me demande quel serait le contexte de mise en forme avant la mise en forme de bloc, s'il y en a un?

  1. Étant donné que la plupart des éléments de bloc n'ont pas de bordure par défaut (comme <html>, <body>, <div>, et puisque leur overflow est visible par défaut, le scénario "par défaut" serait qu'une boîte flottante s'aligne apparemment avec un bloc non flottant adjacent, car quelle que soit la marge de ce dernier, elle s'effondre avec la marge supérieure du bloc contenant.

  2. Un élément flottant n'est en flux avec aucun autre élément non flottant élément dans leur conteneur, et donc tout élément non flottant adjacent bloc se positionne comme si l'élément flottant n'était pas là. Seul le contenu du bloc non flottant, dont la position est soit statique ou relative, enveloppe le bloc flottant.

0
Dharman 26 avril 2020 à 21:58