Résumé de la définition et de l'utilisation des fonctions d'attributs flottants

Pour introduire l'attribut float de CSS, vous devez d'abord comprendre le flux de document standard : sans l'intervention de CSS, les éléments au niveau du bloc occupent une ligne. Vous pouvez définir la largeur et la hauteur des éléments en ligne. côte à côte, et la largeur et la hauteur sont automatiquement remplies. Le flux de documents standard (mise en page par défaut) d'une page HTML est le suivant : de haut en bas, de gauche à droite, avec des sauts de ligne en cas de rencontre de blocs (éléments au niveau du bloc). L'utilisation initiale de l'attribut float consistait à envelopper le contenu cible avec du texte, ce qui est souvent vu dans les journaux. Plus tard, il a été principalement utilisé pour organiser le contenu horizontalement côte à côte : après avoir attribué une valeur à l'attribut float de. l'élément, Il s'agit de rompre avec le flux du document, de flotter à gauche et à droite et de s'en tenir aux bordures gauche et droite de l'élément parent (la valeur par défaut est la zone du corps de texte). Introduction aux attributs float : left : L'élément flotte vers la gauche. right : l'élément flotte vers la droite.

1. Une brève introduction aux propriétés flottantes en CSS

Introduction : Sans l'intervention de CSS, les éléments au niveau du bloc occupent une ligne, et la largeur et la hauteur peuvent être définies. Les éléments en ligne sont affichés côte à côte, et la largeur et la hauteur sont automatiquement remplies. Le flux de documents standard (mise en page par défaut) d'une page HTML est le suivant : de haut en bas, de gauche à droite, avec des sauts de ligne en cas de rencontre de blocs (éléments au niveau du bloc).

2. Propriété flottante CSS float

Introduction : Cet article présente principalement l'attribut float : définissant la direction dans laquelle l'élément flotte.

3. Après avoir défini l'attribut float sur li, l'ul externe ne peut pas être ouvert.

J'ai rencontré ce problème plusieurs fois dans le projet récemment, je pense qu'il est causé par le flottement. Bien que j'aie utilisé

Cela a été résolu, mais je ne l'ai pas vraiment compris, j'ai vérifié le contenu pertinent sur Internet, car après avoir défini le flotteur. li, il s'est détaché du flux de documents normal actuel, il n'y a donc aucun moyen d'augmenter la hauteur de l'ul externe.

4. Explication sur la façon d'utiliser l'attribut flottant CSS et des exemples

L'attribut flottant CSS est utilisé pour définir des objets d'étiquette (tels que : < ;p>, balise , balise , balise et autres balises html), flottant est ce que nous appelons l'objet étiquette flottant vers la gauche (float:left) Déplacez-vous vers la droite (float:right).

Que signifie flotter ? Float signifie flotter, et cela signifie également flotter lorsqu'il est traduit en chinois. Accédez au manuel float dans le manuel CSS correspondant pour en savoir plus sur les informations de base sur float.

Le rôle de float : définissez float (flottant) via CSS pour laisser le bloc de calque de style p flotter vers la gauche ou la droite (penché).

5. Résumé de la façon d'utiliser clear Both pour effacer les flottants en CSS

Dans notre développement quotidien de pages Web, chaque page a beaucoup de mises en page, puis Quand nous développions, nous savions que l'utilisation de CSS float produirait du CSS float, une chose que nous devons faire est d'effacer le float. Pour ce faire, nous devons utiliser l'attribut clear style. Présentation d'un résumé de l'utilisation de clear pour effacer les flotteurs !

6. Partagez une solution d'optimisation pour effacer les flottants

Le hack clearfix est bien connu comme méthode d'effacement des flottants sans utiliser de balises supplémentaires. une solution d'optimisation qui peut réduire davantage la quantité de CSS requise.

Questions et réponses connexes :

1 javascript - Questions sur l'utilisation du débordement : caché pour effacer les flottants

2.

java - problème de boîte flottante Android

[Recommandations associées]

1

jQuery implémente un positionnement flottant intelligent lorsque la page défile<.>2.

Implémentation simple de la boîte flottante js

3

Résumé de la façon d'utiliser Clear Both pour effacer les flottants en CSS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!