Pourquoi ne pas la hauteur d'un élément de conteneur augmenter si elle contient flottait éléments?

La flottait éléments ne sont pas à la hauteur de l'élément de conteneur, et donc si vous n'avez pas les effacer, la hauteur du conteneur ne sera pas augmenter...

Je vais vous montrer visuellement:

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 des éléments conteneurs, mais je vous suggère d'utiliser clear: both; à la place.

Aussi, si vous aimez l'auto-effacer un élément, vous pouvez utiliser

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

---

Comment CSS Float Travail?

Qu'est-ce que le flotteur exactement et pour quoi faire?

• La float propriété est mal compris par la plupart des débutants. Eh bien, exactement ce que fait float faire? Initialement, le float propriété a été introduit aux flux de texte autour des images, qui sont flottaient left ou right. Voici une autre explication par @Madara Uchicha.

  Donc, est-ce mal d'utiliser la float propriété pour placer des boîtes côte à côte? La réponse est pas; il n'y a pas de problème si vous utilisez le float de la propriété afin de mettre les boîtes aux côtés.

• Flottant une inline ou block niveau de l'élément fera l'élément se comporte comme une inline-block élément.

  Démo

• Si vous flotter un élément left ou right, le width de l'élément sera limitée au contenu, il est titulaire, sauf width est définie de manière explicite ...

• Vous ne pouvez pas float un élément center. C'est le plus gros problème, je l'ai toujours vu avec les débutants, à l'aide de float: center;, ce qui n'est pas une valeur valide pour le float de la propriété. float est généralement utilisé pour float/déplacer le contenu vers le très gauche ou à la très droit. Il y a seulement quatre valeurs valides pour float bien je.e left, right, none (par défaut) et inherit.

• Élément Parent s'effondre, quand il contient flottaient des éléments d'enfant, dans le but d'éviter cela, nous utilisons clear: both; propriété, pour effacer le flottaient des éléments sur les deux côtés, ce qui permettra d'éviter l'effondrement de l'élément parent. Pour plus d'informations, vous pouvez consulter mon autre réponse ici.

• (Important) Pense d'elle, où 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 un. D'où les éléments dans le document normal flux se cacher derrière le flottait éléments parce que c'est sur le niveau de la pile au-dessus de la normale flottait éléments. (Merci de ne pas faire le rapprochement avec z-index que c'est complètement différent.)

---

En prenant un cas comme exemple pour expliquer comment CSS flotte de travail, en supposant que nous avons besoin d'un simple 2 mise en page en colonnes avec une en-tête, pied de page, et 2 colonnes, voici donc ce que le modèle ressemble à...

Dans l'exemple ci-dessus, nous serons flottant uniquement les cases rouges, soit vous pouvez float à la fois à la left, ou vous pouvez float sur left, et un autre à right ainsi, dépend de la mise en page, si c'est 3 colonnes, vous pouvez float 2 colonnes à left où une autre à l' right donc dépend, bien que dans cet exemple, nous avons simplifié 2 colonne mise en page sera donc float un à left et l'autre à la right.

Balisage et les styles pour créer la mise en page est expliqué 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-y étape par étape avec la mise en page et de voir comment flotteur fonctionne..

Tout d'abord, nous utilisons le principal élément wrapper, vous ne pouvez que supposer que c'est votre fenêtre d'affichage, puis nous utilisons header et affecter un height de 50px donc rien de compliqué, là. C'est juste un normal non flottait au niveau du bloc de l'élément qui va prendre 100% horizontale de l'espace, sauf si c'est en bateau ou nous attribuer inline-block à elle.

La première valeur valide pour float est left ainsi, dans notre exemple, nous utilisons float: left; pour .floated_left, de sorte que nous avons l'intention de flotter un bloc à la left de notre élément conteneur.

Colonne flottait à la gauche

Et oui, si vous le voyez, le parent de l'élément, qui est .wrapper est effondré, celui que vous voyez avec une bordure verte n'a pas une extension, mais il devrait droite? Reviendra que dans un certain temps, pour l'instant, nous avons une colonne flottait à left.

Venir à la deuxième colonne, permet de float celui-ci à la right

Une autre colonne lancée vers la droite

Ici, nous avons un 300px grande colonne qui nous float à la right, qui s'assoit à côté de la première colonne comme il flottait à la left, et depuis il est flottait à la left, elle a créé des vides de la gouttière à la right, et puisqu'il y avait amplement d'espace sur le right, notre right flottait élément assis parfaitement à côté de la left un.

Encore, l'élément parent est effondré, eh bien, nous allons corriger cela. Il existe de nombreux moyens pour empêcher l'élément parent de s'effondré.

• Ajouter un bloc vide, l'élément et l'utilisation clear: both; avant la fin de l'élément parent, qui détient flottait éléments, maintenant, c'est une solution bon marché pour clear vos éléments flottants qui fera le travail pour vous, mais, je vous recommande de ne pas utiliser ce.

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

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

Démo

Bien, qui corrige très bien, pas de effondré parent plus, mais il ajoute inutile de balisage pour les DOM, de sorte que certains le suggèrent, à utiliser overflow: hidden; sur l'élément parent holding flottait enfant les éléments qui fonctionnent comme prévu.

Utilisation overflow: hidden; sur .wrapper

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

Démo

Qui nous sauve d'un élément à chaque fois que nous avons besoin de clear float mais comme je l'ai testé plusieurs cas, cela a échoué dans une en particulier, qui utilise box-shadow sur les éléments d'enfant.

Démo (Ne peut pas voir l'ombre sur les 4 côtés, overflow: hidden; l'origine de ce problème)

Alors quoi maintenant? Enregistrer un élément, pas de overflow: hidden; alors, allez pour un claire de fixer hack, utilisez l'extrait de code ci-dessous dans votre CSS, et tout comme vous utilisez overflow: hidden; pour l'élément parent, appelez le class ci-dessous sur l'élément parent de l'auto-clair.

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

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

Démo

Ici, l'ombre fonctionne comme prévu, également, il s'auto-efface l'élément parent qui l'empêche de s'effondrer.

Et enfin, nous utilisons le pied de page après nous clear la flottait éléments.

Démo

---

Quand est float: none; utilisé de toute façon, comme c'est le défaut, de sorte que toute utilisation de déclarer float: none;?

Bien, ça dépend, si vous allez pour un responsive design, vous allez utiliser cette valeur un grand nombre de fois, quand vous voulez que votre flottait éléments pour rendre l'un en dessous de l'autre à une certaine résolution. Pour que float: none; de la propriété joue un rôle important là.

---

Quelques exemples du monde réel de la façon dont float est utile.

• Le premier exemple, nous avons déjà vu, est de créer une ou plusieurs mises en page en colonnes.
• À l'aide de img flottait à l'intérieur de p qui permettra à notre contenu de flux autour de.

Démo (Sans flottante img)

Demo 2 (img flottait à la left)

• À l'aide de float pour la création de menu horizontale - Démo

---

Float deuxième élément, ou de l'utilisation de "marge"

Dernier mais non le moindre, je tiens à expliquer ce cas particulier où vous float seulement un seul élément de la left mais vous n'avez pas float l'autre, de sorte que ce qui se passe?

Suppose que si on enlève float: right; de notre .floated_right class, le div rendu de l'extrême left comme il n'est pas évoquée.

Démo

Donc, dans ce cas, vous pouvez float à gauche ainsi

OU

Vous pouvez utiliser margin-left qui sera égal à la taille de la colonne de gauche flottait je.e 200px large.

Vous rencontrez le flotteur bug (même si je ne sais pas si techniquement c'est un bug dû à la façon dont de nombreux navigateurs présentent ce comportement). Voici ce qui se passe:

Dans des circonstances normales, en supposant qu'aucune explicite de la hauteur a été défini, un élément de niveau bloc comme une div qui va définir sa hauteur en fonction de son contenu. Le bas de la div parent va au-delà du dernier élément. Malheureusement, flottant un élément arrête le parent de prendre le flottait élément en compte lors de la détermination de sa hauteur. Cela signifie que si votre dernier élément est flottant, il ne sera pas "étirer" la mère de la même façon un élément normal serait.

De compensation

Il y a deux façons de résoudre ce problème. La première est d'ajouter une "compensation" de l'élément, qui est, à un autre élément au-dessous de la flottait un qui va les obliger les parents à s'étirer. Il faut donc ajouter le code html suivant que le dernier enfant:

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

Il ne devrait pas être visible, et en utilisant clair:les deux, vous vous assurez de ne pas s'asseoir à côté de la flottait élément, mais d'après elle.

Overflow:

La deuxième méthode, qui est préféré par la plupart des gens (je pense) est de modifier le CSS de l'élément parent, de sorte que le dépassement est rien mais "visible". Si le réglage du dépassement de "caché" va forcer les parents à dépasser le bas de la flottait enfant. Ceci est vrai uniquement si vous n'avez pas défini une hauteur sur le parent, bien sûr.

Comme je l'ai dit, la seconde méthode est préférable car il ne nécessite pas d'aller et ajouter de la sémantique des éléments de sens à votre balise, mais il ya des moments où vous avez besoin de la overflow pour être visible, auquel cas l'ajout d'un élément de compensation est plus qu'acceptable.

Vous confondez la manière dont les navigateurs rend les éléments lorsqu'il y a des éléments flottants. Si un élément de bloc est flottant (votre intérieur div dans ton cas), d'autres éléments de bloc seront les ignorer, parce que le navigateur supprime les éléments flottants de l'écoulement normal de la page web. Ensuite, parce que la div flottant a été retiré de la circulation normale, à l'extérieur de la div est rempli, comme l'intérieur de la div n'est pas là. Toutefois, des éléments en ligne (images, des liens, du texte, blackquotes) respectera les limites de l'élément flottant. Si vous saisissez du texte à l'extérieur de la div, le texte aura lieu autour de l'intérieur de la div.

En d'autres termes, les éléments de bloc (en-têtes, des paragraphes, des vrd, etc) ignorer les éléments flottants et remplir, et des éléments en ligne (images, des liens, du texte, etc) le respect des limites des éléments flottants.

Un violon exemple 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>

Essayer celui-ci

.parent_div{
    display: flex;
}