Une brève analyse de l'utilisation du flotteur suspendu HTML

Auteur：Eve Cole Date de mise à jour：2025-04-25 21:16:01

Quelques usages de flotteur

Suspension gauche: float:left;

Suspension droite: float:right;

Utilisation du flotteur

L'utilisation du flotteur est assez large. Ici, je présente brièvement les usages communs de la collection:

Avant d'entrer dans Float, je vais définir quelques propriétés de blocage en ligne. Les attributs de bloc sont combinés avec l'incrustation div pour compléter la disposition de la page. Ensuite, je monte dans l'attribut flottant, ce qui rend les éléments flottant beaucoup plus faciles. Il n'y a pas de distinction entre les éléments au niveau du bloc, les éléments en ligne ou les blocs de ligne dans le flottement. Le flotteur tapera également automatiquement la taille des changements de largeur de l'élément parent, par exemple. Ajustez directement la fenêtre de visualisation et serrez les éléments dans la ligne suivante.
De plus, en ce qui concerne l'optimisation SEO que je viens d'apprendre, l'analyse du navigateur est de haut en bas. Par conséquent, un contenu important est souvent écrit à l'avant et certaines publicités sans importance ou des publicités sont écrites à l'arrière. Cependant, je veux que les utilisateurs fassent attention aux publicités. Par conséquent, le contenu principal est organisé au centre et les publicités sont suspendues à gauche et à droite. Je crois que les amis qui parcourent souvent les pages Web ont également remarqué ce point. Parlons de certains des écrits et des effets de la suspension. Parlons de certains des écrits et des effets de la suspension.

Si l'élément enfant est suspendu, cela entraînera l'effondrement de l'élément parent à une hauteur. Cette partie implique de nettoyer la suspension. Le prochain chapitre mentionnera l'explication de la compensation de la suspension.

Alors revenons au point,

Le premier phénomène float = bloc en ligne

La suspension sera le style de 4 blocs devenant le mode de bloc en ligne: comme indiqué sur la figure ci-dessous

 <style> div {largeur: 200px; hauteur: 200px; Color en arrière-plan: rose; Border: 1px noir solide; flottant: à gauche; } </ style>

 <body> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div>

Le deuxième phénomène:

Comme le montre la figure ci-dessous, puisque la première est suspendue, le deuxième élément de bloc sera présenté sous le premier.

Cependant, ce dernier élément ne traversera pas l'élément précédent, comme l'élément du quatrième bloc, mais le troisième ne sera pas suspendu. L'élément de bloc de la quatrième saison reste dans sa position d'origine.

 <style>. Color en arrière-plan: vert; } .second-one {background-Color: Purple; } .third-one {fond-couleur: bleu; } .fourth-one {float: Left; Color en arrière-plan: gris; } div {largeur: 200px; hauteur: 200px; Color en arrière-plan: rose; Border: 1px noir solide; taille de police: 30px; } </ style>

 <body> <div class = First-One> </div> <div class = Second-one> </div> <div class = tiers> </div> <div class = Quatrième-one> </div> <div class = Quatrième-one> </div> </ body>

Le troisième phénomène:

Si tous les éléments flottent et que la largeur restante de l'élément parent ne suffit pas pour soutenir la disposition des éléments enfants dans cette ligne, il sera connecté au niveau supérieur

Cet article est reproduit à partir de: https://segmentfault.com/a/1190000022669455

Résumer

C'est la fin de cet article sur une brève analyse de l'utilisation du flotteur flottant HTML. Pour plus de contenu Float Floating HTML plus lié, veuillez rechercher des articles précédents sur Wulin.com ou continuer à parcourir les articles connexes ci-dessous. J'espère que tout le monde soutiendra Wulin.com à l'avenir!