Les éléments flottants n'ajoutent pas à la hauteur de l'élément conteneur, et donc si vous ne les effacez pas, la hauteur du conteneur n'augmentera pas ...
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;des éléments de conteneur, mais je vous suggère de les utiliser à la clear: both;place.
Aussi, si vous souhaitez effacer automatiquement un élément que vous pouvez utiliser
.self_clear:after {
content: "";
clear: both;
display: table;
}
Comment fonctionne CSS Float?
Qu'est-ce que le flotteur exactement et que fait-il?
La floatpropriété est mal comprise par la plupart des débutants. Eh bien, que fait float- on exactement ? Initialement, la floatpropriété a été introduite pour faire circuler le texte autour des images, flottantes leftou right. Voici une autre explication de @Madara Uchicha.
Alors, est-ce mal d'utiliser la floatpropriété pour placer des boîtes côte à côte? La réponse est non ; il n'y a aucun problème si vous utilisez la floatpropriété afin de placer des boîtes côte à côte.
Flotter un élément inlineou blocklevel fera que l'élément se comportera comme un inline-blockélément.
DémoSi vous faites flotter un élément leftou right, l' widthélément de l'élément sera limité au contenu qu'il contient, sauf s'il widthest défini explicitement ...
Vous ne pouvez pas floatun élément center. C'est le plus gros problème que j'ai toujours vu avec les débutants, en utilisant float: center;floatpropriété. floatest 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 floatpropriété, c'est left-à- dire right, none(par défaut) et inherit.
L'élément parent s'effondre, lorsqu'il contient des éléments enfants flottants, afin d'éviter cela, nous utilisons la clear: both;propriété, pour effacer les éléments flottants des deux côtés, ce qui empêchera l'effondrement de l'élément parent. Pour plus d'informations, vous pouvez consulter ma autre réponse ici .
(Important) Pensez-y où nous avons une pile de divers éléments. Lorsque nous utilisons l'élément float: left;ou float: right;se déplace au-dessus de la pile par un. Par conséquent, les éléments du flux de documents normal se cacheront derrière les éléments flottants car il se trouve au niveau de la pile au-dessus des éléments flottants normaux. (S'il vous plaît ne faites pas le lien avec cela z-indexcar c'est complètement différent.)
Prenons un cas comme exemple pour expliquer comment les flotteurs CSS fonctionnent, en supposant que nous avons besoin d'une disposition simple à 2 colonnes avec un en-tête, un pied de page et 2 colonnes, voici donc à quoi ressemble le plan ...
Dans l'exemple ci-dessus, nous ne flotterons que les cases rouges, soit vous pouvez les floatdeux à la left, ou vous pouvez floatà left, et une autre à rightainsi, dépend de la mise en page, si c'est 3 colonnes, vous pouvez float2 colonnes à leftun autre l'un rightdépend de la façon dont, dans cet exemple, nous avons une disposition simplifiée à 2 colonnes, de même que l' floatun leftet l'autre pour le right.
Balisage et styles de création de la mise en page expliqués plus loin ...
<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 étape par étape avec la mise en page et voyons comment fonctionne le flotteur.
Tout d'abord, nous utilisons l'élément wrapper principal, vous pouvez simplement supposer qu'il s'agit de votre fenêtre d'affichage, puis nous utilisons headeret affectons un élément heightde 50pxrien de spécial là-bas. C'est juste un élément de niveau de bloc non flottant normal qui prendra de 100%l'espace horizontal à moins qu'il ne flotte ou que nous ne lui attribuions inline-block.
La première valeur valide pour floatest leftainsi dans notre exemple, nous utilisons float: left;pour .floated_left, nous avons donc l'intention de faire flotter un bloc vers le leftde notre élément conteneur.
La colonne flottait à gauche
Et oui, si vous voyez, l'élément parent, qui est .wrappereffondré, celui que vous voyez avec une bordure verte ne s'est pas développé, mais il devrait bien? J'y reviendrai dans un moment, pour l'instant, nous avons une colonne flottante left.
Venir à la deuxième colonne, laisse celui float-ci à laright
Une autre colonne flottait à droite
Ici, nous avons une 300pxlarge colonne que nous avons floatà la right, qui va s'asseoir à côté de la première colonne pendant qu'elle flotte vers la left, et comme elle flotte vers la left, elle a créé une gouttière vide vers la right, et puisqu'il y avait beaucoup d'espace sur la right, notre rightL'élément flottant était parfaitement assis à côté de leftcelui.
Pourtant, l'élément parent est réduit, eh bien, corrigeons cela maintenant. Il existe de nombreuses façons d'empêcher l'élément parent de s'effondrer.
- Ajoutez un élément de niveau bloc vide et utilisez-le
clear: both;avant la fin de l'élément parent, qui contient des éléments flottants, maintenant celui-ci est une solution bon marché à clearvos éléments flottants qui fera le travail pour vous mais, je recommanderais de ne pas l'utiliser.
Ajoutez, <div style="clear: both;"></div>avant les .wrapper divfins, 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 un balisage inutile au DOM, donc certains suggèrent, à utiliser overflow: hidden;sur l'élément parent contenant des éléments enfants flottants qui fonctionnent comme prévu.
Utiliser overflow: hidden;sur.wrapper
.wrapper {
border: 3px solid green;
overflow: hidden;
}
Démo
Cela nous sauve un élément à chaque fois que nous en avons besoin, clear floatmais comme j'ai testé divers cas avec cela, il a échoué dans un cas particulier, qui utilise box-shadowles éléments enfants.
Démo (ne peut pas voir l'ombre sur les 4 côtés,overflow: hidden;provoque ce problème)
Et maintenant? Enregistrez un élément, overflow: hidden;alors optez pour un hack de correction clair, utilisez l'extrait ci-dessous dans votre CSS, et tout comme vous l'utilisez overflow: hidden;pour l'élément parent, appelez le classci - dessous sur l'élément parent pour qu'il s'auto-efface.
.clear:after {
clear: both;
content: "";
display: table;
}
<div class="wrapper clear">
<!-- Floated Elements -->
</div>
Démo
Ici, l'ombre fonctionne comme prévu, elle efface également automatiquement l'élément parent, ce qui empêche l'effondrement.
Et enfin, nous utilisons le pied de page après clearles éléments flottants.
Démo
Quand est-il float: none;utilisé de toute façon, comme c'est la valeur par défaut, donc toute utilisation pour déclarer float: none;?
Eh bien, cela dépend, si vous optez pour une conception réactive, vous utiliserez cette valeur beaucoup de fois, lorsque vous souhaitez que vos éléments flottants se rendent les uns en dessous des autres à une certaine résolution. Car cette float: none;propriété y joue un rôle important.
Peu d'exemples concrets de l' floatutilité.
- Le premier exemple que nous avons déjà vu est de créer une ou plusieurs dispositions de colonne.
- Utiliser
imgflotté à l'intérieur pqui permettra à notre contenu de circuler.
Démo (sans flottementimg)
Démo 2 (imgflottant vers leleft)
- Utilisation
floatpour créer un menu horizontal - Démo
Flottez également le deuxième élément ou utilisez `margin`
Dernier point mais non le moindre, je veux expliquer ce cas particulier où vous n'avez floatqu'un seul élément à la leftmais vous ne faites pas floatl'autre, alors que se passe-t-il?
Supposons que si nous supprimons float: right;de notre .floated_right class, le divsera rendu de l'extrême leftcar il ne flotte pas.
Démo
Donc dans ce cas, vous pouvez soit floatl'au leftet
OU
Vous pouvez utiliser margin-leftce qui sera égal à la taille de la colonne flottante gauche, c'est-à-dire 200pxlarge .