1 votes

Quand les éléments HTML flottants doivent-ils être effacés exactement ?

Quelqu'un peut-il expliquer quand les éléments flottants doivent être effacés ?

J'ai remarqué que parfois, lorsque je fais quelque chose en HTML, et que je ne les efface pas, tout est quand même beau !

Peut aussi overflow:hidden peut être utilisé en remplacement du défrichage ?

Regardez cet exemple :

<html>
<head>
  <style>
    .a { background-color: red; overflow: hidden }
    .floated-left { float: left; width: 100px; height: 100px; background-color: blue; }
  </style>
</head>

<body>
  <p>div with class a, that does have overflow:hidden:</p>
  <div class="a">
    <div class="floated-left">Hi,</div>
    <div class="floated-left">Mom!</div>
  </div>

  <p>i didn't clear anything</p>
</body>
</html>

Ici je n'ai pas effacé les divs flottants, mais j'ai mis overflow:hidden pour le .a et la classe <p> ci-dessous sont apparus dans le flux normal des éléments.

Cependant, si j'ai retiré overflow:hidden de la .a classe, <p> est déplacé.

Veuillez expliquer !

Merci, Boda Cydo.

4voto

outis Points 39377

Pour les éléments non remplacés au niveau du bloc, lorsque overflow n'est pas réglé sur "visible" et height n'est pas "auto", le hauteur de l'élément dépend de ses descendants ( CSS 2.1 § 10.6.6 ). Ainsi, lorsque vous définissez overflow: hidden sur .a il s'étire pour contenir les descendants flottants. Le site <p> se trouve ci-dessous .a donc c'est en dessous des flotteurs.

Sans overflow: hidden , .a ne contient pas d'enfants flottants ; sa hauteur calculée est de 0. <p> est toujours inférieure à .a mais pas les flotteurs. Les flottants poussent le contenu en ligne de <p> comme les flotteurs ont l'habitude de le faire.

Essayez de mettre des bordures autour .a et les paragraphes pour mieux voir la différence.

3voto

cletus Points 276888

overflow: hidden doit être utilisé en remplacement de la suppression des divs chaque fois que cela est possible, c'est-à-dire la plupart du temps.

2voto

prodigitalson Points 38549

Si vous devez faire flotter les éléments autour d'un bloc de pneu en tant qu'unité et que l'élément contenant doit s'étendre verticalement à la hauteur de celui qui est le plus haut. Sinon, le texte/les éléments de ligne des éléments adjacents non flottants s'écouleront autour du flotteur. Si ce contenu finit par être plus haut que votre flotteur, tout va bien... le conteneur va s'étendre. Si toutefois l'élément flottant est plus haut, vous devrez l'effacer si vous voulez que le conteneur soit aussi haut que le flotteur.

1voto

Joel Etherton Points 24155

Comme je l'ai répondu dans votre autre message http://stackoverflow.com/questions/2166074/when-should-overflowhidden-be-used-for-a-div/2166121#2166121 Cela s'explique par le fait que les éléments enfants du div a font sortir les marges de a lorsque le débordement n'est pas visible. Lorsque le débordement est visible, a s'arrête techniquement à la limite de la division pour "Maman !". Lorsqu'il n'est pas visible (overflow, scroll, auto), la limite continue jusqu'à ce qu'il atteigne la limite de son propre parent (dans ce cas, le bord droit du navigateur). Le nouvel élément de bloc ne peut pas commencer tant qu'il n'a pas d'espace à occuper. Lorsque le débordement est visible, il peut commencer directement après la limite de la marge du dernier div flottant. Dans le cas contraire, il doit attendre une rupture complète de la division.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X