web-dev-qa-db-fra.com

Pourquoi la hauteur d'un élément conteneur n'augmente-t-elle pas s'il contient des éléments flottants?

Je voudrais demander comment la hauteur et le travail de flotteur. J'ai une div externe et une div interne qui a un contenu en elle. Sa hauteur peut varier en fonction du contenu de la div interne, mais il semble que ma div interne débordera de sa div externe. Quelle serait la bonne façon de le faire?

 <html>
    <body>
        <div style="margin:0 auto;width: 960px; min-height: 100px; background-color:orange">
            <div style="width:500px; height:200px; background-color:black; float:right"></div>
        </div>
    </body>
</html>
htmlcsscss-float
194
Boy Pasmo

Les éléments flottants ne s'ajoutent pas à la hauteur de l'élément conteneur. Par conséquent, si vous ne les supprimez pas, la hauteur du conteneur n'augmentera pas ...

Je vais vous montrer visuellement:

enter image description here

enter image description here

enter image description here

Plus d'explication:

<div>
  <div style="float: left;"></div>
  <div style="width: 15px;"></div> <!-- This will shift 
                                        besides the top div. Why? Because of the top div 
                                        is floated left, making the 
                                        rest of the space blank -->

  <div style="clear: both;"></div> 
  <!-- Now in order to prevent the next div from floating beside the top ones, 
       we use `clear: both;`. This is like a wall, so now none of the div's 
       will be floated after this point. The container height will now also include the 
       height of these floated divs -->
  <div></div>
</div>

Vous pouvez également ajouter overflow: hidden; sur les éléments de conteneur, mais je vous conseillerais plutôt d'utiliser clear: both;.

Aussi, si vous souhaitez effacer vous-même un élément, vous pouvez utiliser

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

Comment fonctionne CSS Float?

Qu'est-ce que float exactement et que fait-il?

  • La propriété float est mal comprise par la plupart des débutants. Bien, que fait exactement float? Initialement, la propriété float a été introduite pour faire passer du texte autour des images, qui sont flottantes left ou right. Voici une autre explication par @Madara Uchicha.

    Alors, est-il erroné d'utiliser la propriété float pour placer des boîtes côte à côte? La réponse est no ; il n'y a pas de problème si vous utilisez la propriété float afin de définir des cases côte à côte.

  • Flotter un élément de niveau inline ou block fera en sorte que cet élément se comporte comme un élément inline-block.

    Démo

  • Si vous faites flotter un élément left ou right, la width de l'élément sera limitée au contenu qu'il contient, à moins que width ne soit défini explicitement ...

  • Vous ne pouvez pas float un élément center. C’est le plus gros problème que j’ai toujours vu avec les débutants, en utilisant float: center;, qui n'est pas une valeur valide pour la propriété float. float est généralement utilisé pour float/déplacer le contenu à l'extrême gauche ou à l'extrême droite . Il n'y a que quatre valeurs valides pour la propriété float, à savoir left, right, none (valeur par défaut) et inherit.

  • L'élément parent se réduit, lorsqu'il contient des éléments enfants flottés, afin d'éviter cela, nous utilisons la propriété clear: both;, pour effacer les éléments flottants des deux côtés, ce qui empêchera la réduction de l'élément parent. Pour plus d'informations, vous pouvez vous référer ma autre réponse ici .

  • (Important) Pensez-y lorsque nous avons une pile de divers éléments. Lorsque nous utilisons float: left; ou float: right;, l'élément se déplace au-dessus de la pile. Par conséquent, les éléments du flux de documents normal se cachent derrière les éléments flottants car ils se trouvent au niveau de la pile au-dessus des éléments flottants normaux. (Veuillez ne pas associer ceci à z-index car c'est complètement différent.)

En prenant un exemple comme exemple pour expliquer le fonctionnement des flottants CSS, en supposant que nous ayons besoin d’une mise en page simple à 2 colonnes avec un en-tête, un pied de page et 2 colonnes, voici à quoi ressemble le plan détaillé ...

enter image description here

Dans l'exemple ci-dessus, nous ne ferons flotter que les cases rouges, soit vous pouvez float les deux en left, soit vous pouvez float sur left, et un autre pour right dépend également de la disposition. S'il s'agit de 3 colonnes, vous pouvez float 2 colonnes à left où un autre à la right dépend donc, mais dans cet exemple , nous avons une disposition simplifiée sur 2 colonnes, donc float l’un sur left et l’autre sur le right.

Les balises et les styles pour créer la mise en page sont expliqués plus bas ...

<div class="main_wrap">
    <header>Header</header>
    <div class="wrapper clear">
        <div class="floated_left">
            This<br />
            is<br />
            just<br />
            a<br />
            left<br />
            floated<br />
            column<br />
        </div>
        <div class="floated_right">
            This<br />
            is<br />
            just<br />
            a<br />
            right<br />
            floated<br />
            column<br />
        </div>
    </div>
    <footer>Footer</footer>
</div>

* {
    -moz-box-sizing: border-box;       /* Just for demo purpose */
    -webkkit-box-sizing: border-box;   /* Just for demo purpose */
    box-sizing: border-box;            /* Just for demo purpose */
    margin: 0;
    padding: 0;
}

.main_wrap {
    margin: 20px;
    border: 3px solid black;
    width: 520px;
}

header, footer {
    height: 50px;
    border: 3px solid silver;
    text-align: center;
    line-height: 50px;
}

.wrapper {
    border: 3px solid green;
}

.floated_left {
    float: left;
    width: 200px;
    border: 3px solid red;
}

.floated_right {
    float: right;
    width: 300px;
    border: 3px solid red;
}

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

Allons pas à pas avec la mise en page et voyons comment fonctionne float.

Tout d’abord, nous utilisons l’élément wrapper principal, vous pouvez simplement supposer que c’est votre fenêtre, puis nous utilisons header et nous affectons une height à 50px pour qu’il n’y ait rien de fantastique. Il s'agit simplement d'un élément de niveau de bloc non flotté normal qui occupera 100% espace horizontal à moins qu'il ne soit flottant ou que nous lui affections inline-block.

La première valeur valide pour float est left, donc dans notre exemple, nous utilisons float: left; pour .floated_left, nous avons donc l'intention de faire flotter un bloc dans le left de notre élément de conteneur.

colonne flottant à gauche

Et oui, si vous voyez, l’élément parent, qui est .wrapper est réduit, celui que vous voyez avec une bordure verte ne s’est pas développé, mais il devrait être correct? J'y reviendrai dans un moment, pour l'instant, nous avons une colonne flottante dans left.

En venant à la deuxième colonne, permet _ float celui-ci à la right

ne autre colonne flotte à droite

Ici, nous avons une colonne 300px large qui nous float à la right, qui sera placée à côté de la première colonne comme elle flotte dans la left, et comme elle est flottante à le left, il a créé une gouttière vide sur le right, et comme il y avait beaucoup d'espace sur le right, notre élément flottant right était parfaitement à côté du left un.

Néanmoins, l’élément parent est réduit, eh bien, réglons le problème maintenant. Il existe de nombreuses façons d'éviter que l'élément parent ne soit réduit.

  • Ajoutez un élément de niveau bloc vide et utilisez clear: both; avant la fin de l'élément parent, qui contient les éléments flottants. Désormais, celui-ci est une solution peu coûteuse pour clear vos éléments flottants qui feront le travail à votre place. recommanderais de ne pas utiliser cela.

Ajouter, <div style="clear: both;"></div> avant le .wrapperdiv se termine, comme

<div class="wrapper clear">
    <!-- Floated columns -->
    <div style="clear: both;"></div>
</div>

Démo

Eh bien, cela corrige très bien, plus aucun parent réduit, mais cela ajoute des balises inutiles au DOM, alors certains suggèrent d’utiliser overflow: hidden; sur l’élément parent contenant des éléments enfants flottants qui fonctionnent comme prévu.

Utilisez overflow: hidden; sur .wrapper

.wrapper {
    border: 3px solid green;
    overflow: hidden;
}

Démo

Cela nous évite un élément à chaque fois que nous devons clearfloat, mais comme j'ai testé différents cas avec cela, cela a échoué dans un cas particulier, qui utilise box-shadow sur les éléments enfants.

Démo (L'ombre ne peut pas être vue des 4 côtés, overflow: hidden; est la cause de ce problème)

Alors quoi maintenant? Sauvez un élément, pas de overflow: hidden; alors optez pour un hack clair, utilisez l'extrait de code ci-dessous dans votre CSS, et comme vous utilisez overflow: hidden; pour l'élément parent, appelez le class ci-dessous le l'élément parent à auto-effacer.

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

<div class="wrapper clear">
    <!-- Floated Elements -->
</div>

Démo

Ici, shadow fonctionne comme prévu. Il efface également l'élément parent, ce qui empêche toute réduction.

Enfin, nous utilisons le pied de page après clear les éléments flottants.

Démo

Quand est-ce que float: none; est utilisé de toute façon, comme c'est le cas par défaut, donc toute utilisation pour déclarer float: none;?

Cela dépend bien, si vous optez pour un design réactif, vous utiliserez cette valeur plusieurs fois, lorsque vous souhaitez que les éléments flottants s'affichent l'un en dessous de l'autre à une certaine résolution. Pour cela, la propriété float: none; joue ici un rôle important.

Quelques exemples concrets de l'utilité de float.

  • Le premier exemple que nous avons déjà vu consiste à créer une ou plusieurs dispositions de colonne.
  • Utiliser img flottait à l'intérieur de p, ce qui permettrait à notre contenu de circuler librement.

Démo (Sans flottant img)

Démo 2 (img flotté vers le left)

  • Utilisation de float pour créer un menu horizontal - Demo

Flotte le deuxième élément aussi, ou utilise `margin`

Dernier point mais non le moindre, je veux expliquer ce cas particulier dans lequel vous float seul élément parmi les left mais vous ne _ float pas l’autre, que se passe-t-il?

Supposons que si nous retirons float: right; de notre .floated_rightclass, la div sera rendue à partir de l'extrême left car elle n'est pas flottante.

Démo

Donc dans ce cas, soit vous pouvez float le à la left également

OR

Vous pouvez tilisez margin-left qui sera égal à la taille de la colonne flottante de gauche, à savoir 200px wide .

565
Mr. Alien

Vous devez ajouter overflow:auto à votre div parent pour que celui-ci englobe le div interne flottant:

<div style="margin:0 auto;width: 960px; min-height: 100px; background-color:orange;overflow:auto">
    <div style="width:500px; height:200px; background-color:black; float:right">
    </div>
</div>

exemple de jsFiddle

35
j08691

Vous rencontrez le bogue float (bien que je ne sois pas sûr que ce soit techniquement un bogue en raison du nombre de navigateurs présentant ce comportement). Voici ce qui se passe:

Dans des circonstances normales, en supposant qu'aucune hauteur explicite n'ait été définie, un élément de niveau bloc tel qu'un div définira sa hauteur en fonction de son contenu. Le bas de la division parent s'étendra au-delà du dernier élément. Malheureusement, la flottaison d'un élément empêche le parent de prendre en compte l'élément flottant pour déterminer sa hauteur. Cela signifie que si votre dernier élément est flottant, il ne "tendra" pas le parent de la même manière qu'un élément normal.

effacement

Il existe deux manières courantes de résoudre ce problème. La première consiste à ajouter un élément "clearing"; c’est-à-dire qu’un autre élément situé en dessous de celui qui est flotté obligera le parent à s’étirer. Ajoutez donc le code HTML suivant comme dernier enfant:

<div style="clear:both"></div>

Il ne devrait pas être visible, et en utilisant clear: les deux, vous vous assurez qu'il ne sera pas placé à côté de l'élément flottant, mais après.

Débordement:

La deuxième méthode, qui est préférée par la plupart des gens (je pense) consiste à changer le code CSS de l'élément parent afin que le débordement soit tout sauf "visible". Donc, définir le débordement sur "masqué" obligera le parent à s'étirer au-delà du bas de l'enfant flottant. Ceci n'est vrai que si vous n'avez pas défini de hauteur sur le parent, bien sûr.

Comme je l'ai dit, la deuxième méthode est préférable car elle ne vous oblige pas à ajouter des éléments sémantiquement dénués de sens à votre balise, mais vous avez parfois besoin que le overflow soit visible, auquel cas l'ajout d'une compensation. L'élément est plus qu'acceptable.

9
Maloric

C'est à cause du flotteur de la div. Ajoutez overflow: hidden sur l'élément extérieur.

<div style="overflow:hidden; margin:0 auto;width: 960px; min-height: 100px; background-color:orange;">
    <div style="width:500px; height:200px; background-color:black; float:right">
    </div>
</div>

démo

3
Starx

Vous confondez la façon dont les navigateurs rendent les éléments lorsqu'il y a des éléments flottants. Si un élément de bloc est flottant (votre division interne dans votre cas), les autres éléments l'ignoreront car le navigateur supprime les éléments flottants du flux normal de la page Web. Ensuite, comme la division flottante a été retirée du flux normal, la division extérieure est remplie, de sorte que la division interne n’est pas présente. Cependant, les éléments en ligne (images, liens, texte, guillemets noirs) respecteront les limites de l'élément flottant. Si vous introduisez du texte dans le div extérieur, le texte placera arround de inner div.

En d'autres termes, les éléments de bloc (en-têtes, paragraphes, divs, etc.) ignorent les éléments flottants et les remplissent, tandis que les éléments incorporés (images, liens, texte, etc.) respectent les limites des éléments flottants.

n exemple de violon ici

<body>
    <div style="float:right; background-color:blue;width:200px;min-height:400px;margin-right:20px">
           floating element
    </div>
    <h1 style="background-color:red;"> this is a big header</h1>
    <p style="background-color:green"> this is a parragraph with text and a big image. The text places arrounds the floating element. Because of the image is wider than space between paragrah and floating element places down the floating element. Try to make wider the viewport and see what happens :D
        <img src="http://2.bp.blogspot.com/_nKxzQGcCLtQ/TBYPAJ6xM4I/AAAAAAAAAC8/lG6XemOXosU/s1600/css.png">
     </p>
3
Alejandro Ruiz Arias

Essaye celui-là

.parent_div{
    display: flex;
}
1
Yusufbek

vous pouvez utiliser la propriété overflow de la div de conteneur si vous n'avez aucune div à afficher sur le conteneur, par exemple:

<div class="cointainer">
    <div class="one">Content One</div>
    <div class="two">Content Two</div>
</div>

Voici le css suivant:

.container{
    width:100%;/* As per your requirment */
    height:auto;
    float:left;
    overflow:hidden;
}
.one{
    width:200px;/* As per your requirment */
    height:auto;
    float:left;
}

.two{
    width:200px;/* As per your requirment */
    height:auto;
    float:left;
}

-----------------------OU-------------------------- ----

    <div class="cointainer">
        <div class="one">Content One</div>
        <div class="two">Content Two</div>
        <div class="clearfix"></div>
    </div>

Voici le css suivant:

    .container{
        width:100%;/* As per your requirment */
        height:auto;
        float:left;
        overflow:hidden;
    }
    .one{
        width:200px;/* As per your requirment */
        height:auto;
        float:left;
    }

    .two{
        width:200px;/* As per your requirment */
        height:auto;
        float:left;
    }
    .clearfix:before,
    .clearfix:after{
        display: table;
        content: " ";
    }
    .clearfix:after{
        clear: both;
    }
1
Nishant Rana