web-dev-qa-db-fra.com

La taille des parents ne suit pas leurs enfants flottants

La hauteur de mon conteneur principal ne suit pas la largeur de leurs enfants

et voici mon code avez-vous une suggestion s'il vous plaît conseiller.

J'ai besoin de la solution CSS et non de JavaScript, merci d'avance

<div id="mainContainer">
    <div id="leftContent">

    </div>

    <div id="rightContent">

    </div>
</div>

et voici mon css

#mainContainer{
    width: 1000px;
    /*height: 1000px;*/
    height:auto;
    margin-left:auto;
    margin-right:auto;
    background-color: #ff6600;
    padding-bottom: 20px;
}
#leftContent{
    height: 100px;
    float: left;
    width: 380px;
    background-color: Violet;
}
#rightContent{
    height: 100px;
    float: right;
    width: 620px;
    background-color: yellow;
}
csscss-float
26
Jongz Puangput

Ajouter overflow:hidden; au conteneur:

#mainContainer{
    width: 1000px;
    /*height: 1000px;*/
    height:auto;
    margin-left:auto;
    margin-right:auto;
    background-color: #ff6600;
    padding-bottom: 20px;

    overflow: hidden; /* <--- here */
}

Parce que son contenu est flottant, le conteneur div s'effondre. Utiliser une classe 'clearfix' ou, comme je l'ai mentionné, ajouter overflow:hidden fera que le conteneur contiendra les éléments flottants.

[~ # ~] mise à jour [~ # ~] Explication de la raison pour laquelle cela fonctionne ici: https://stackoverflow.com/a/9193270/1588648

... et ici:

Pour qu'ils (les navigateurs) calculent ce qui débordait les limites du bloc (et devaient donc être masqués), ils devaient connaître la taille du bloc. Étant donné que ces blocs n'ont pas de hauteur explicite définie, les navigateurs ont utilisé la hauteur calculée du contenu à la place.

http://www.stubbornella.org/content/2009/07/23/overflow-a-secret-benefit/

69
Kevin Boucher

Vous devez effacer vos éléments flottants, utilisez overflow: hidden; pour #mainContainer

Démo

Autre: (vous pouvez ajouter clear: both; pour effacer les flotteurs)

Démo

Ou vous pouvez également effacer automatiquement les éléments flottants (uniquement si vous souhaitez prendre en charge IE9 = +

.clear:after {
  content: "";
  clear: both;
  display: table;
}

Pourquoi cela se produit-il?

9
Mr. Alien

Utiliser le débordement: masquer et effacer un flotteur

#mainContainer{
    width: 1000px;
    height:auto;
    margin-left:auto;
    margin-right:auto;
    background-color: #ff6600;
    padding-bottom: 20px;

    overflow: hidden;
    clear: both;
}
4
Tamil Selvan C