Problèmes de flottement CSS, de positionnement et d'effondrement du conteneur parent

Comment dire ? Cela fait trois mois que je suis entré en contact avec le front-end. Après une si longue période d'études, mon niveau est encore moyen. J'ai participé à l'IFE2017 il y a quelques jours. un résumé de ma compréhension du flottement, du positionnement et quelques réflexions sur la disposition des colonnes et les problèmes d'effondrement du conteneur parent.

Tout d'abord, le flottement et le positionnement sont la base de la mise en page en CSS. Grâce au flottement et au positionnement, chaque modèle de boîte peut être contrôlé avec précision au niveau du pixel, ce qui montre son importance.

Parlons d'abord du flottant :

Dans le modèle objet de document HTML, une mise en page fluide est adoptée, c'est-à-dire que les éléments au niveau du bloc sont sur une ligne exclusive, et vous Si vous souhaitez que les éléments au niveau du bloc soient disposés côte à côte, il existe deux méthodes principales, l'une consiste à définir l'affichage des éléments au niveau du bloc sur inline-block en CSS. Mais souvent, il n’est pas approprié d’utiliser cette méthode. Le plus souvent, nous utiliserons la méthode flottante.

Float, il existe deux types principaux : float: left; et float: right; float peut éloigner les éléments au niveau du bloc du flux de document standard. On peut comprendre que les éléments avec float défini doivent se déplacer. dans la direction définie jusqu'à ce qu'il soit bloqué ou qu'il atteigne la limite du conteneur parent. Si la largeur restante de la ligne est insuffisante, la boîte flottante flottera jusqu'à la ligne suivante. Floating fournit une solution pour implémenter la mise en page.

Cependant, ce qui ne peut être ignoré, c'est que parfois un simple flottement ne peut pas répondre à nos besoins en matière de disposition d'interface. À l'heure actuelle, l'importance du positionnement se reflète. Le positionnement peut être divisé en quatre types : relatif (positionnement relatif), absolu (positionnement absolu), fixe (positionnement fixe) et statique. Lorsque nous n'appliquons pas d'attributs de positionnement à un élément, cela équivaut à du statique.

Alors, comment comprendre le positionnement relatif ? L'élément (modèle de boîte) avec le positionnement relatif appliqué ne s'écarte pas du flux de documents standard. Vous pouvez définir les valeurs haut, gauche, droite et inférieure pour obtenir un réglage fin de l'élément (modèle de boîte). par rapport à la position d'origine. Top signifie que l'élément est par rapport à la position d'origine. La position se déplace vers le bas (vous pouvez définir une valeur négative, ce qui équivaut à définir une valeur positive en bas), et left signifie que l'élément se déplace vers la position d'origine. à droite par rapport à sa position d'origine. De même, la droite se déplace vers la gauche et le bas monte.

Positionnement absolu : L'élément avec un positionnement absolu appliqué sera séparé du flux de documents, comme s'il n'avait jamais existé. A ce moment, son positionnement est relatif à son élément ancêtre avec un positionnement relatif appliqué. Et il a aussi une caractéristique très importante : il « traversera » en fonction de la valeur de déplacement réglée. Qu'est-ce que cela signifie ? C'est-à-dire que les paramètres haut, gauche, droite et bas sont relatifs aux limites de son élément ancêtre (boîte). Si une direction de déplacement est définie pour lui, l'élément (boîte) se déplacera d'abord vers la limite dans cette direction, puis se déplacera par rapport à la limite.

Positionnement fixe : le positionnement fixe est également séparé du flux de documents standard, mais il est relatif à la fenêtre du navigateur et ne changera pas avec le mouvement de la barre de défilement ou de l'interface. Il peut également être défini en haut, à gauche. , à droite, valeurs inférieures.

Quant à la disposition des colonnes, j'utilise personnellement les méthodes suivantes :

1. Si la disposition est divisée en deux colonnes, vous pouvez appliquer float aux deux cases en même temps pour la disposition . Vous pouvez définir Définir la largeur ou le pourcentage de largeur des cases gauche et droite.

2. Il est également disposé en deux colonnes. Vous pouvez également appliquer une disposition flottante à gauche à la boîte de gauche, appliquer un positionnement à la boîte de droite ou définir sa valeur de marge sur position.

3. Pour la mise en page à trois colonnes, il est préférable d'utiliser la méthode de flottement et de positionnement. Faites flotter les cases sur les côtés gauche et droit et définissez les marges gauche et droite de l'élément central (boîte). ) pour réaliser le positionnement.

Il faut comprendre que flotter, une belle initiative, peut provoquer l'effondrement du conteneur parent, c'est-à-dire lorsque tous les éléments du conteneur flottent (ce qui fera augmenter la hauteur du conteneur parent). zéro) ou les éléments internes ne flottent pas. Lorsque les éléments ne sont pas suffisants pour supporter le conteneur parent, la hauteur du conteneur parent sera de 0 ou pas suffisante pour répondre à nos exigences de mise en page. résoudre ce problème. J'ai plusieurs façons :

1. Définissez une hauteur pour le conteneur parent

2. Définissez le débordement du conteneur parent : caché ou overflow : auto ; >

overflow:hidden;
overflow:auto;

3. Définissez l'élément parent sur float (non recommandé)

4. Définissez l'élément vide dessus (clearfix : les deux)

5. Appliquez le style suivant à l'élément parent :

En résumé, pour la disposition des éléments dans les pages Web, le flottant et le positionnement sont souvent utilisés ensemble uniquement. une fois combinés, pouvons-nous obtenir l’effet dont nous avons besoin.

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

Ce qui précède sont quelques-unes de mes petites expériences sur le positionnement et le flottement CSS pendant cette période. Il peut y avoir des erreurs. J'espère que vous pourrez me les signaler afin que nous puissions tous progresser ensemble. Pour résumer, j'ai lu beaucoup de documents de grands noms, j'ai donc emprunté beaucoup de leurs opinions, partagé certaines de mes propres compréhensions et en même temps approfondi ma compréhension des connaissances impliquées. J'espère que tout le monde travaillera ensemble sur la première voie et progressera chaque jour !

Pour plus de problèmes de flottement CSS, de positionnement et d'effondrement du conteneur parent, veuillez prêter attention au site Web PHP chinois pour les articles connexes !