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 une façon imagée
![enter image description here]()
![enter image description here]()
![enter image description here]()
Plus d'explications :
<div>
<div style="float: left;"></div>
<div style="width: 15px;"></div> <!-- This will shift
beside the top div, why? because the top div
is floated to left, and hence making the
rest of the space blank -->
<div style="clear: both;"></div>
<!-- Now in order to prevent the next div to float besides the top ones
we use `clear: both;`, this is like a wall, so now none of the div's
will be floated after here and also the container will now count the
height of these floated divs -->
<div></div>
</div>
Vous pouvez également ajouter overflow: hidden; sur les éléments du conteneur, mais je vous suggère d'utiliser l'option clear: both; à la place.
De plus, si vous souhaitez effacer un élément par vous-même, vous pouvez utiliser la fonction
.self_clear:after {
content: "";
clear: both;
display: table;
}
Comment fonctionne le CSS Float ?
Qu'est-ce qu'un flotteur exactement et que fait-il ?
-
float La propriété est mal comprise par la plupart des débutants, mais qu'est-ce que c'est exactement ? float fait ? Dans un premier temps, float a été introduite pour faire circuler le texte autour de l'image, qui est flottante. left ou right , a également indiqué ici Par @Madara Uchicha .
Alors, est-ce que c'est mal d'utiliser float pour placer des boîtes côte à côte ? alors la réponse est pas de il n'y a pas de problème si vous utilisez float afin de placer les boîtes côte à côte.
-
Flottant un inline ou block fera en sorte que l'élément se comporte comme un élément de type inline-block élément.
Démo
-
Faire flotter n'importe quel élément vers left ou right le width de l'élément sera limité au contenu qu'il contient, sauf si width est défini explicitement ...
-
Vous ne pouvez pas float un élément à la center c'est le plus gros problème que j'ai toujours vu avec les débutants, en utilisant float: center;float propriété, float est généralement utilisé pour float /déplacer le contenu vers le très gauche ou à la très droite . Il n'y a que quatre valeurs valables pour float propriété, c'est-à-dire left , right , none Défaut , inherit .
-
L'élément parent s'effondre, lorsqu'il contient des éléments enfants flottants, afin d'éviter cela, nous utilisons la fonction clear: both; 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 vous référer à mon autre réponse ici .
Prenons un cas comme exemple pour expliquer le fonctionnement des flottants CSS, supposons que nous ayons besoin d'une simple mise en page à 2 colonnes avec un en-tête, un pied de page et 2 colonnes, voici donc à quoi ressemble le plan...
![enter image description here]()
Dans l'exemple ci-dessus, nous ne ferons flotter que les cases rouges, ou bien vous pouvez float à la fois au left ou vous pouvez float sur left et un autre à right dépend également de la mise en page, si c'est 3 colonnes, vous pouvez float 2 colonnes à left où l'autre à la right Cela dépend, bien que dans cet exemple, nous ayons une mise en page simplifiée à 2 colonnes et nous allons donc float un à left et l'autre à la right .
Balisage et styles pour la création de la mise en page, 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 étape par étape avec la mise en page et voir comment le flotteur fonctionne
Tout d'abord, nous utilisons un élément principal d'habillage, vous pouvez supposer que c'est votre fenêtre d'affichage, puis nous utilisons header et attribuer un height de 50px donc rien d'extraordinaire ici Il s'agit simplement d'un élément normal de niveau bloc, non flottant, qui prendra la place de 100% espace horizontal, à moins qu'il ne soit flottant ou que nous lui attribuions inline-block à elle.
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 passer un bloc à l'adresse suivante left de notre élément conteneur.
Colonne flottante vers la gauche
Et oui, si vous voyez, l'élément parent, qui est .wrapper est effondrée, celle que vous voyez avec une bordure verte ne s'est pas développée, mais elle devrait, non ? Nous y reviendrons dans un moment, mais pour l'instant, nous avons une colonne flottante vers le haut. left .
En ce qui concerne la deuxième colonne, laissez-la float celui-ci à la right
Une autre colonne a flotté vers la droite
Ici, nous avons un 300px large colonne que nous float à la right qui se trouvera à côté de la première colonne lorsqu'elle sera déplacée vers le haut. left et puisqu'il est flottant dans le left il a créé une gouttière vide vers le right et puisqu'il y avait beaucoup d'espace sur l'autoroute, nous avons décidé d'y aller. right notre right L'élément flottant s'est parfaitement installé à côté de l'élément left un.
Pourtant, l'élément parent est effondré, eh bien, nous allons corriger cela maintenant. Il existe de nombreuses façons d'empêcher l'élément parent de s'effondrer.
- Ajoutez un élément vide de niveau bloc et utilisez
clear: both; avant la fin de l'élément parent, qui contient des éléments flottants, ce qui constitue une solution bon marché à la question suivante clear vos éléments flottants qui feront le travail pour vous mais, je vous recommande de ne pas l'utiliser.
Ajouter, <div style="clear: both;"></div> avant le .wrapper div les extrémités, comme
<div class="wrapper clear">
<!-- Floated columns -->
<div style="clear: both;"></div>
</div>
Démo
Eh bien, cela corrige très bien, il n'y a plus de parent collapsé, mais cela ajoute des balises inutiles au DOM, donc certains suggèrent d'utiliser overflow: hidden; sur l'élément parent contenant des éléments enfants flottants, ce qui fonctionne comme prévu.
Utilisez overflow: hidden; sur .wrapper
.wrapper {
border: 3px solid green;
overflow: hidden;
}
Démo
Cela nous permet d'économiser un élément chaque fois que nous devons clear float mais comme j'ai testé plusieurs cas avec cela, cela a échoué dans un cas particulier, qui utilise box-shadow sur les éléments enfants.
Démo (On ne peut pas voir l'ombre sur les 4 côtés, overflow: hidden; cause ce problème)
Et maintenant ? Sauvegarder un élément, non overflow: hidden; utilisez le code ci-dessous dans votre CSS, et comme vous utilisez overflow: hidden; pour l'élément parent, appelez la méthode class ci-dessous sur l'élément parent pour s'effacer
.clear:after {
clear: both;
content: "";
display: table;
}
<div class="wrapper clear">
<!-- Floated Elements -->
</div>
Démo
Ici, l'ombre fonctionne comme prévu, et elle efface elle-même l'élément parent, ce qui empêche l'effondrement
Et enfin, nous utilisons le pied de page après avoir clear les éléments flottants.
Démo
Quand est-ce que float: none; utilisé de toute façon, puisqu'il est par défaut, donc toute utilisation pour déclarer float: none; ?
Eh bien, cela dépend, si vous optez pour un design réactif, vous utiliserez souvent cette valeur, lorsque vous voudrez que vos éléments flottants s'affichent les uns en dessous des autres à une certaine résolution. Pour cela float: none; l'immobilier y joue un rôle important
Quelques exemples concrets de la façon dont float est utile..
- Le premier exemple que nous avons déjà vu consiste à créer une mise en page à colonnes multiples ou plus que multiples.
- Utilisation de
img flottait à l'intérieur p ce qui permettra à notre contenu de circuler.
Démo (Sans flottant img )
Démo 2 ( img a flotté vers le left )
- Utilisation de
float pour créer un menu horizontal - Démo
Flotter le deuxième élément aussi, ou utiliser `margin`.
Enfin, je veux expliquer ce cas particulier où vous float seul élément unique à la left mais vous ne le faites pas float l'autre, alors que se passe-t-il ?
Supposons que nous supprimions float: right; de notre .floated_right class le div sera rendu d'extrême en extrême left car il n'est pas flottant.
Démo
Donc dans ce cas, soit vous pouvez float la à la left également
OU
Vous pouvez utiliser margin-left qui sera égale à la taille de la colonne flottante de gauche, soit 200px grand site .
0 votes
Duplicata possible de CSS : la hauteur minimale ne fonctionne pas o CSS : Problème de hauteur des divs lors de la mise en place du float
0 votes
Beau et très bon merci !
0 votes
Duplicata possible de Les éléments flottants à l'intérieur d'une div, flottent à l'extérieur de la div. Pourquoi ?