web-dev-qa-db-fra.com

Débordement de CSS: caché avec des flotteurs

J'ai lu le code suivant sur w3schools et je ne comprends pas en quoi la propriété overflow aurait un impact sur le fait que le texte apparaisse à droite de la ul ou non. 

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

li {
  float: left;
}

a {
  display: block;
  width: 60px;
  background-color: #dddddd;
  padding: 8px;
}
<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>
<p><b>Note:</b> overflow:hidden is added to the ul element to prevent li elements from going outside of the list.</p>

Je sais que overflow:hidden est utilisé pour gérer le contenu qui sort de la boîte, mais je ne comprends pas comment cela s’applique dans ce cas.

htmlcssoverflow
15
Robert Rocha

J'essaie de mettre fin à la confusion:

ul est un élément de niveau bloc au même titre que l'élément p (ils s'étendent à 100% de la largeur du parent). C’est pourquoi, par défaut, la p apparaît sous la ul si aucune largeur ni aucun affichage n’est déclaré sur ces éléments.

Dans votre exemple, la variable ul ne contient que des éléments flottants. Cela le réduit à une hauteur de 0px (il a toujours 100% de largeur, comme vous pouvez le voir dans l'exemple). La variable p adjacente apparaîtra à la droite de la variable lis car elles sont considérées comme des éléments flottants normaux.

Maintenant, déclarer overflow (toute valeur autre que visible) établit un nouveau contexte de formatage de bloc , qui fait en sorte que ul contienne ses enfants. Soudain, la ul "réapparaît", n'ayant plus la taille 0px. La p est poussée vers le bas. Vous pouvez également déclarer position:absolute pour obtenir le même effet "d'effacement" (avec l'effet secondaire suivant: maintenant la ul est sortie du flux d'éléments normal - la ps sera recouverte par la ul.)

VOIR L'EXEMPLE DE VIOLON

Si vous êtes technique, comparez les paragraphes correspondants de la spécification CSS:

§10.6.3 Eléments non remplacés au niveau du bloc dans un flux normal lorsque le "dépassement de capacité" est calculé comme "visible"
et
§10.6.7 Hauteurs 'Auto' pour les racines de contexte de formatage de bloc . (Merci à BoltClock d'avoir creusé les liens).

ul{
    list-style-type:none;
    margin:0; padding:0;
    background-color:#dddddd;
    border:2px solid red;
}
li{
    float:left;
}
a{
    display:block;
    width:60px;
    background-color:#555;
    color:white;
}
p{
    margin:0;
    outline:2px dotted blue;
}
#two{
    clear:both;
    overflow:hidden;
}
No overflow:
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
<p>Notice the collapsed ul - no background-color visible, collapsed border and this paragraph treats the lis as regular floats  </p>
<br>
With overflow: hidden
<ul id="two">
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
<p>the ul reappeared - it now contains the child li's - the float is cleared</p>

32
Christoph

Si vous définissez overflow: hidden sur un élément, vous créez un nouveau contexte flottant. Par conséquent, les éléments flottants dans un élément auquel overflow: hidden est appliqué sont effacés.

http://www.w3.org/TR/CSS2/visuren.html#block-formatting

10
ryanbrill

C'est pourquoi w3schools n'est pas une source fiable pour les concepteurs/développeurs Web. Vous avez raison, c'est un exemple terrible.

Ce n'est pas le cas, dans cet exemple, l'élément parent n'a pas de corrigé avec. En outre, il s’agit d’une balise de liste non ordonnée, qui va quand même s’étendre à la taille de ses enfants.

http://jsfiddle.net/EhphH/

CSS

.parent {
    width: 150px;
    height: 100px;
    padding: 10px;
    background: yellow;
    overflow: hidden;

}
.child {
    float: left;
    width: 75px;
    height: 120px;
    margin: 10px;
    background: blue;

}
.baby {
    width: 200px;
    height: 25px;
    background: green;
}

Balisage 

<div class="parent">
    <div class="child">
        <div class="baby">
        </div>
    </div>
    <div class="child">
    </div>
</div>
0
Plummer