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

Je voudrais demander comment fonctionnent la hauteur et le flotteur. J’ai une div externe et une div interne qui contient du contenu. 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?

Les éléments flottants ne s’ajoutent pas à la hauteur de l’élément conteneur et, par conséquent, si vous ne les effacez pas, la hauteur du conteneur n’augmentera pas …

Je vais vous montrer visuellement:

entrer la description de l'image ici

entrer la description de l'image ici

entrer la description de l'image ici

Plus d’explication:

 

Vous pouvez également append un overflow: hidden; capacité overflow: hidden; sur des éléments de conteneur, mais je suggère que vous utilisiez clear: both; au lieu.

Aussi, si vous souhaitez effacer un élément que 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é du float est mal comprise par la plupart des débutants. Eh bien, que fait exactement float ? Initialement, la propriété float été introduite pour faire circuler le texte autour des images, qui flottent à left ou à right . Voici une autre explication par @Madara Uchicha.

    Donc, est-ce faux d’utiliser la propriété float pour placer des boîtes côte à côte? La réponse est non ; il n’y a pas de problème si vous utilisez la propriété float pour définir des boîtes côte à côte.

  • Faire flotter un élément inline ou block fera que l’élément se comportera comme un élément inline-block .

    Démo

  • Si vous flottez un élément à left ou à right , la width de l’élément sera limitée au contenu qu’il contient, à moins que la width ne soit définie explicitement …

  • Vous ne pouvez pas float un center éléments. 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 tout à gauche ou tout à droite . Il n’y a que quatre valeurs valides pour la propriété float , à savoir left , right , none (default) et inherit .

  • L’élément parent s’effondre, lorsqu’il contient des éléments enfants flottants, afin d’éviter cela, nous utilisons clear: both; propriété, pour effacer les éléments flottants sur les 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 à mon autre réponse ici .

  • (Important) Pensez-y où nous avons une stack d’éléments divers. Lorsque nous utilisons float: left; ou float: right; l’élément se déplace au dessus de la stack de un. Par conséquent, les éléments du stream de documents normal se cacheront derrière les éléments flottants, car ils se trouvent au niveau de la stack au-dessus des éléments flottants normaux. (Merci de ne pas relier ceci à z-index car c’est complètement différent.)


Prenant un cas comme exemple pour expliquer comment les flotteurs CSS fonctionnent, en supposant que nous ayons besoin d’une disposition simple en 2 colonnes avec un en-tête, un pied de page et 2 colonnes, voici à quoi ressemble le plan …

entrer la description de l'image ici

Dans l’exemple ci-dessus, nous ne laisserons flotter que les cases rouges, soit vous pouvez float vers la left , soit float vers la left , et une autre vers la right , selon la disposition, si vous avez 3 colonnes, vous pouvez float 2 colonnes à left un autre à right dépend, bien que dans cet exemple, nous avons une mise en page à 2 colonnes simplifiée, donc une à left et l’autre à right .

Le balisage et les styles de création de la mise en page sont expliqués plus bas …

 
Header
This
is
just
a
left
floated
column
This
is
just
a
right
floated
column
Footer
* { -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 voir comment fonctionne le flotteur.

Tout d’abord, nous utilisons l’élément principal du wrapper, vous pouvez simplement supposer que c’est votre fenêtre, puis nous utilisons l’en- header et lui 50px une height de 50px . C’est juste un élément de niveau de bloc non flottant normal qui occupera 100% espace horizontal sauf s’il est flottant ou si nous lui inline-block en ligne.

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

Colonne flottée à 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? Reviendra à cela dans un moment, pour l’instant, nous avons une colonne à left .

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

Une autre colonne flottait à droite

Ici, nous avons une colonne de 300px large que nous float à right , qui va s’asseoir à côté de la première colonne pendant qu’elle flotte à left , et comme elle flotte à left , elle a créé une gouttière vide à right . de l’espace à right , notre élément flottant à right était parfaitement placé à côté de celui de left .

Pourtant, l’élément parent est réduit, eh bien, corrigeons cela maintenant. Il existe de nombreuses manières d’empêcher que l’élément parent ne soit réduit.

  • Ajouter un élément de niveau de bloc vide et utiliser clear: both; avant la fin de l’élément parent, qui contient des éléments flottants, celui-ci est maintenant une solution bon marché pour clear vos éléments flottants qui feront le travail pour vous, mais je vous recommande de ne pas l’utiliser.

Ajouter,

avant que la div .wrapper se termine, comme

 

Démo

Eh bien, cela corrige très bien, pas de parent réduit, mais cela ajoute un balisage inutile au DOM, donc certains suggèrent d’utiliser le overflow: hidden; sur l’élément parent contenant des éléments enfants flottants qui fonctionnent comme prévu.

Utiliser le 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 avons besoin d’ clear float mais comme j’ai testé différents cas avec cela, il a échoué dans un cas particulier, qui utilise box-shadow sur les éléments enfants.

Démo (Impossible de voir l’ombre sur les 4 côtés, overflow: hidden; cause ce problème)

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

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

Démo

Ici, shadow fonctionne comme prévu, aussi, il efface lui-même l’élément parent qui empêche de réduire.

Et enfin, nous utilisons le pied de page après avoir effacé les éléments flottants.

Démo


Quand est float: none; utilisé de toute façon, car c’est la valeur 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 cette valeur de nombreuses fois, lorsque vous voulez que vos éléments flottants se rendent l’un sous l’autre à une certaine résolution. Pour ce float: none; la propriété 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 est de créer une ou plusieurs dispositions de colonne.
  • Utiliser img flotté à l’intérieur de p ce qui permettra à notre contenu de circuler.

Démo (sans img flottant)

Démo 2 ( img flotté à left )

  • Utiliser float pour créer un menu horizontal – Démo

Flotter également le deuxième élément ou utiliser `margin`

Last but not least, je veux expliquer ce cas particulier où vous ne faites float qu’un seul élément à left mais vous ne float pas l’autre, alors que se passe-t-il?

Supposons que si on enlève float: right; de notre class .floated_right , le div sera rendu de l’extrême left car il n’est pas flottant.

Démo

Donc, dans ce cas, vous pouvez aussi float à left aussi

OU

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

Vous devez append un overflow:auto à votre div parent pour qu’il englobe le div interne flottant:

 

jsFiddle exemple

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

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

Clairière

Il existe deux méthodes courantes pour résoudre ce problème. La première consiste à append un élément “clearing”; c’est-à-dire un autre élément en dessous de l’élément flottant qui forcera le parent à s’étirer. Ajoutez donc le code HTML suivant comme dernier enfant:

 

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, que la plupart des gens préfèrent (je pense) est de changer le CSS de l’élément parent afin que le débordement soit tout sauf “visible”. Donc, placer le débordement sur “caché” forcera le parent à s’étendre 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 seconde méthode est préférable car elle ne nécessite pas que vous ajoutiez des éléments sans signification sémantique à votre balisage, mais il y a des moments où le overflow doit être visible, auquel cas l’ajout d’un élément de compensation est supérieur à acceptable.

C’est à cause du flotteur de la div. Ajouter un overflow: hidden sur l’élément extérieur.

 

Démo

Vous confondez la manière dont les navigateurs affichent les éléments lorsqu’il y a des éléments flottants. Si un élément de bloc est flottant (votre div interne dans votre cas), d’autres éléments de bloc l’ignoreront car le navigateur supprime les éléments flottants du stream normal de la page Web. Ensuite, parce que le div flottant a été retiré du stream normal, le div externe est rempli, comme le div interne n’est pas là. Cependant, les éléments en ligne (images, liens, texte, guillemets) respecteront les limites de l’élément flottant. Si vous introduisez du texte dans le div extérieur, le texte placera l’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 remplissent, et les éléments en ligne (images, liens, texte, etc.) respectent les limites des éléments flottants.

Un exemple de violon ici

  
floating element

this is a big header

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

Vous pouvez utiliser la propriété overflow dans le conteneur div si vous n’avez pas de div à afficher sur le conteneur, par exemple:

 
Content One
Content Two

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————————– —-

  
Content One
Content Two

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; } 

Si vous devez faire en sorte que vos divs enfants flottent à gauche, je recommande le code ci-dessous à votre div parent.

 .parent_div{ display: flex; } 

utilisez

au bas de tous vos codes, mais ci-dessus

Il suffit de copier et coller

Ça va travailler préfet