css float clair float haslayout-tutoriel CSS-php.cn

1 : float est une fonctionnalité de mise en page spéciale qui provoque la rupture de l'élément spécifié du flux de documents ordinaire. Il doit être appliqué aux éléments de niveau bloc, ce qui signifie que les flottants ne s'appliquent pas aux balises en ligne. Lorsque float est appliqué, cet élément sera désigné comme élément de niveau bloc. Par exemple, une fois qu'un élément en ligne est défini sur float, vous pouvez définir sa largeur et sa hauteur.

.clear:after{
content:" ";
display:block;
height:0;
clear:both;
visibility:hidden;
}

Copier après la connexion

: Le pseudo-élément after ajoute du contenu après l'élément. Ce pseudo-élément permet aux créateurs d'insérer du contenu généré à la fin du contenu de l'élément. Par défaut, ce pseudo-élément est un élément en ligne, mais cela peut être modifié à l'aide de l'attribut display. Le contenu généré en utilisant after est un espace. D'abord display: block, puis définissez la hauteur sur 0 pour éviter qu'il n'affecte la mise en page. Le masquage est similaire à height: 0, ce qui signifie qu'il n'affecte pas la mise en page. clear : les deux signifient effacer float. Pour les navigateurs ie6 et ie7 qui ne prennent pas en charge après, ajoutez simplement une hauteur : 1% et tout ira bien. Dans ce cas, ie6 et ie7 auront haslayout.

2:haslayput

En fait, haslayout est un composant interne du moteur de rendu de Windows Internet Explorer 7 ou version antérieure,

Dans Internet Explorer 7 et versions antérieures, un élément calcule la taille et organise son propre contenu, ou s'appuie sur l'élément parent pour calculer la taille et organiser le contenu. Afin de concilier ces deux concepts différents, le moteur de rendu utilise l'attribut hasLayout, qui peut être vrai ou faux. Lorsque la valeur de l'attribut hasLayout d'un élément est vraie, nous disons que l'élément a une mise en page. Lorsqu'un élément a une mise en page, il est responsable de son dimensionnement et de son positionnement ainsi que des éventuels éléments descendants. En termes simples, au lieu de compter sur des éléments ancêtres pour faire le travail. IE peut être consulté via la barre d'outils du développeur IE. Ensuite, que l'élément HTML ait haslayout, l'élément avec haslayout est généralement affiché comme "haslayout = -1".

La disposition has ici consiste à calculer et à positionner la taille de lui-même et des éventuels éléments descendants pour déterminer la hauteur de l'élément parent. C'est-à-dire que l'élément parent s'adapte à la hauteur du contenu à l'intérieur. comprendra pourquoi une hauteur est ajoutée. :1% de la raison. Bien sûr, vous pouvez également ajouter d'autres attributs pour lui donner une disposition, comme la largeur, etc. Bien sûr, vous pouvez ajouter float (float peut également déclencher la mise en page), mais ce n'est pas recommandé. N'utilisez pas float pour effacer float, car float générera un autre float.

	, Les propriétés et valeurs CSS suivantes donneront une mise en page à un élément : position : absolue Le bloc contenant l'élément positionné de manière absolue a souvent des problèmes à cet égard. float: left\|right En raison des caractéristiques de l'élément de mise en page, le modèle flottant aura de nombreux comportements étranges. display: inline-block Il est souvent utilisé lorsqu'un élément de niveau en ligne nécessite une mise en page. Cela peut également être le seul effet de cette propriété CSS – let Un élément a un. mise en page. Le « comportement de bloc en ligne » est possible dans IE, mais il est très différent : IE/Win : inline-block et hasLayout. largeur : n'importe quelle valeur sauf "auto" Lorsque de nombreuses personnes rencontrent des problèmes liés à la mise en page, elles essaient généralement de les résoudre en premier. hauteur : n'importe quelle valeur sauf « auto » hauteur : 1 % Utilisé dans Holly Hack. zoom : toute valeur sauf "normale" propriété spécifique à IE. Cependant, zoom : 1 peut être utilisé temporairement pour le débogage. writing-mode : tb-rl propriété spécifique à MS. overflow: Hidden\|scroll\|auto Dans IE7, le débordement est également devenu un déclencheur de mise en page. Cet attribut n'avait pas pour fonction de déclencher la mise en page dans les versions précédentes d'IE. overflow-x\|-y: Hidden\|scroll\|auto overflow-x et overflow-y sont des propriétés du modèle de boîte CSS3 qui ne sont pas encore largement prises en charge par les navigateurs. Ils n'avaient pas la possibilité de déclencher la mise en page dans les versions précédentes d'IE. De plus, plusieurs nouveaux acteurs haslayout ont été ajoutés à l'écran IE7. Si l'on considère uniquement hasLayout, min/max et width/height se comportent de la même manière, et la position est fixe. la même chose que l'absolu. position : fixe min-width : n'importe quelle valeur même s'il est défini sur 0, l'élément peut obtenir une mise en page. max-width : n'importe quelle valeur sauf "aucune" min-height : n'importe quelle valeur Même s'il est défini sur 0, vous pouvez définir la valeur haslayout=true de l'élément max-height : n'importe quelle valeur sauf "none" À propos éléments de niveau en ligne Pour les éléments en ligne (peuvent être en ligne par défaut, tels que les éléments span ou les éléments avec display : inline) la largeur et la hauteur déclenchent uniquement hasLayout dans les bizarreries mode de IE5.x et IE6 ou plus récent. Pour IE6, si le navigateur s'exécute en mode de compatibilité standard, les éléments en ligne ignoreront les attributs width ou height, donc la définition de width ou height ne peut pas ordonner à l'élément d'avoir une disposition dans ce cas. le zoom peut toujours déclencher hasLayout, mais il n'est pas pris en charge dans IE5.0. Si un élément avec "layout" affiche également : inline, son comportement est très similaire au inline-block mentionné dans le standard : c'est le même qu'un texte ordinaire dans un paragraphe. horizontalement et continuellement, affecté par alignement vertical, et la taille peut être ajustée de manière adaptative en fonction du contenu. Cela peut également expliquer pourquoi dans IE/Win seul, les éléments en ligne peuvent contenir des éléments de niveau bloc avec moins de problèmes, car dans d'autres navigateurs, display: inline signifie en ligne, contrairement à IE/Win, une fois que l'élément en ligne a une mise en page, il a toujours une mise en page. Deviendra un bloc en ligne. Réinitialiser hasLayout La réinitialisation des propriétés suivantes à leurs valeurs par défaut dans une autre règle réinitialisera (ou annulera) hasLayout, si aucune autre propriété n'est ajoutée à hasLayout : largeur, hauteur (définie sur "auto") largeur maximale, hauteur maximale (définie sur "aucun") (dans IE 7) position (réglée sur "statique") flotteur (réglée sur "aucun") débordement (défini sur "visible") (dans IE 7) zoom (défini sur "normal") mode d'écriture (défini de "tb-rl" à "lr-t) Différence dans l'attribut d'affichage : lors de l'utilisation de "inline-block" Lorsque haslayout = true est défini, même si cet attribut est remplacé par "block" ou "inline" dans une règle distincte, l'indicateur haslayout ne sera pas réinitialisé sur false Réinitialiser mi-largeur, réglage de mi-. height à leur valeur par défaut de "0" donnera toujours hasLayout, mais IE 7 peut accepter un attribut illégal "auto" pour réinitialiser hasLayout. 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! Étiquettes associées： float source：php.cn Article précédent：CSS--Mise en page Article suivant：Solution au problème selon lequel l'attribut width des éléments HTML n'a aucun effet Déclaration de ce site Web Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn Derniers articles par auteur Comment ajouter des éléments au tableau php 2023-03-14 15:58:02 Exemple montrant comment JS implémente un système simple d'évaluation à choix multiples 1970-01-01 08:00:00 Solution PHP pour restreindre les soumissions multiples de la même IP 2023-03-15 07:38:01 Utiliser des expressions régulières pour implémenter la validation de formulaire en HTML 1970-01-01 08:00:00 Explication détaillée de ce problème de pointage en mode strict JavaScript 1970-01-01 08:00:00 Exemple de code pour créer un menu arborescent (y compris un menu à plusieurs niveaux) en Java 1970-01-01 08:00:00 Explication détaillée d'exemples de CSS3 implémentant une transition en douceur lorsque le survol quitte 1970-01-01 08:00:00 Analyse du partage de code source d'image du carrousel Swiper 1970-01-01 08:00:00 Résumer et organiser les plug-ins VsCode 1970-01-01 08:00:00 Code de classe de l'outil de requête HttpUtils 1970-01-01 08:00:00 Derniers numéros function_exists() ne peut pas déterminer la fonction personnalisée Function test () {return true;} if (function_exists ('test')) {echo "le test est une ... Depuis 2024-04-29 11:01:01 0 3 2250 Comment afficher la version mobile de Google Chrome Bonjour professeur, comment puis-je changer Google Chrome en version mobile ? Depuis 2024-04-23 00:22:19 0 11 2388 La fenêtre enfant exploite la fenêtre parent, mais la sortie ne répond pas. Les deux premières phrases sont exécutables, mais la dernière ne peut pas être implémentée... Depuis 2024-04-19 15:37:47 0 1 2001 Il n'y a aucune sortie dans la fenêtre parent document.onclick = function(){ window.opener.document.write('Je suis la sortie de la fenêt... Depuis 2024-04-18 23:52:34 0 1 1885 Où sont les didacticiels sur la cartographie mentale CSS ? Didacticiel Depuis 2024-04-16 10:10:18 0 0 1955 Rubriques connexes Plus> utilisation de float en CSS Que signifie Chrome ? Quelle est l'adresse email et comment la renseigner ? Suffixe du nom du fichier de modification par lots Linux Le but de la commande rm-rf sous Linux java configurer les variables d'environnement jdk Utilisation de ModifierMenu Logiciel de système de gestion ERP gratuit Recommandations populaires Comment configurer CSS pour dépasser les ellipses d'affichage Comment définir la taille de la police en CSS Comment utiliser le survol en CSS Comment définir l'espacement des caractères en CSS Quelles sont les nouvelles fonctionnalités de CSS3 Tutoriels populaires Plus> Tutoriels associés Recommandations populaires Derniers cours Le dernier didacticiel vidéo ThinkPHP 5.1 en première mondiale (60 jours pour devenir un expert PHP en ligne) 1423501 Premier tutoriel d'introduction à PHP : Apprenez PHP en une semaine 4269036 Tutoriel vidéo JAVA pour débutants 2538753 Tutoriel vidéo d'introduction base zéro à l'apprentissage de Python de Little Turtle 507646 Tutoriel d'introduction PHP base zéro 862902 Le dernier didacticiel vidéo ThinkPHP 5.1 en première mondiale (60 jours pour devenir un expert PHP en ligne) 1423501 temps d'étude Tutoriel vidéo JAVA pour débutants 2538753 temps d'étude Tutoriel vidéo d'introduction base zéro à l'apprentissage de Python de Little Turtle 507646 temps d'étude Introduction rapide au développement web front-end 215884 temps d'étude Maîtrisez les didacticiels vidéo PS à partir de zéro 890614 temps d'étude [Web front-end] Démarrage rapide de Node.js 7482 temps d'étude Collection complète de cours full-stack de développement Web étranger 5986 temps d'étude Aller au langage pratique GraphQL 4944 temps d'étude Le maître du ventilateur de 550 W apprend JavaScript à partir de zéro, étape par étape 699 temps d'étude Le maître Python Mosh, un débutant sans aucune connaissance de base peut commencer en 6 heures 24840 temps d'étude Derniers téléchargements Plus> effets Web Code source du site Web Matériel du site Web Modèle frontal [bouton de formulaire] Code de contact du formulaire de message d'entreprise jQuery [Effets spéciaux du joueur] Effets de lecture de boîte à musique HTML5 MP3 [Navigation dans les menus] Effets spéciaux du menu de navigation d'animation de particules cool HTML5 [bouton de formulaire] Code d'édition par glisser-déposer du formulaire visuel jQuery [Effets spéciaux du joueur] Code du lecteur de musique Kugou imitation VUE.JS [effets spéciaux HTML5] Jeu de boîte de poussée HTML5 classique [Effets spéciaux d'image] défilement jQuery pour ajouter ou réduire des effets d'image [Effets d'album photo] Effet de zoom de survol de la couverture de l'album personnel CSS3 [Modèle frontal] Modèle de site Web d'entreprise de services de nettoyage et de réparation de décoration intérieure [Modèle frontal] Modèle de page de guide de CV personnel aux couleurs fraîches [Modèle frontal] Modèle Web de CV de travail créatif de concepteur [Modèle frontal] Modèle de site Web d'entreprise de construction d'ingénierie moderne [Modèle frontal] Modèle HTML5 réactif pour les établissements de services éducatifs [Modèle frontal] Modèle de site Web de centre commercial de boutique de livres électroniques en ligne [Modèle frontal] La technologie informatique résout le modèle de site Web d'entreprise Internet [Modèle frontal] Modèle de site Web de service de trading de devises de style violet [Matériau PNG] Matériau vectoriel d'éléments d'été mignons (EPS+PNG) [Matériau PNG] Matériel vectoriel de quatre badges de graduation rouges 2023 (AI+EPS+PNG) [image de bannière] Oiseau chantant et chariot rempli de fleurs design matériel vectoriel de bannière de printemps (AI + EPS) [Matériau PNG] Matériau vectoriel de chapeau de graduation doré (EPS+PNG) [Matériau PNG] Matériel vectoriel d'icône de montagne de style noir et blanc (EPS+PNG) [Matériau PNG] Matériel vectoriel de silhouette de super-héros (EPS+PNG) avec des capes de couleurs différentes et des poses différentes [image de bannière] Matériel vectoriel de bannière Arbor Day de style plat (AI + EPS) [Matériau PNG] Matériel vectoriel de neuf bulles de discussion explosives de style bande dessinée (EPS+PNG) [Modèle frontal] Modèle de site Web d'entreprise de services de nettoyage et de réparation de décoration intérieure [Modèle frontal] Modèle de page de guide de CV personnel aux couleurs fraîches [Modèle frontal] Modèle Web de CV de travail créatif de concepteur [Modèle frontal] Modèle de site Web d'entreprise de construction d'ingénierie moderne [Modèle frontal] Modèle HTML5 réactif pour les établissements de services éducatifs [Modèle frontal] Modèle de site Web de centre commercial de boutique de livres électroniques en ligne [Modèle frontal] La technologie informatique résout le modèle de site Web d'entreprise Internet [Modèle frontal] Modèle de site Web de service de trading de devises de style violet Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！ À propos de nous Clause de non-responsabilité Sitemap © php.cn All rights reserved

Les propriétés et valeurs CSS suivantes donneront une mise en page à un élément :

position : absolue
Le bloc contenant l'élément positionné de manière absolue a souvent des problèmes à cet égard.
float: left|right
En raison des caractéristiques de l'élément de mise en page, le modèle flottant aura de nombreux comportements étranges.
display: inline-block
Il est souvent utilisé lorsqu'un élément de niveau en ligne nécessite une mise en page. Cela peut également être le seul effet de cette propriété CSS – let Un élément a un. mise en page. Le « comportement de bloc en ligne » est possible dans IE, mais il est très différent : IE/Win : inline-block et hasLayout.
largeur : n'importe quelle valeur sauf "auto"
Lorsque de nombreuses personnes rencontrent des problèmes liés à la mise en page, elles essaient généralement de les résoudre en premier.
hauteur : n'importe quelle valeur sauf « auto »
hauteur : 1 % Utilisé dans Holly Hack.
zoom : toute valeur sauf "normale"
propriété spécifique à IE. Cependant, zoom : 1 peut être utilisé temporairement pour le débogage.
writing-mode : tb-rl
propriété spécifique à MS.
overflow: Hidden|scroll|auto
Dans IE7, le débordement est également devenu un déclencheur de mise en page. Cet attribut n'avait pas pour fonction de déclencher la mise en page dans les versions précédentes d'IE.
overflow-x|-y: Hidden|scroll|auto
overflow-x et overflow-y sont des propriétés du modèle de boîte CSS3 qui ne sont pas encore largement prises en charge par les navigateurs. Ils n'avaient pas la possibilité de déclencher la mise en page dans les versions précédentes d'IE.
De plus, plusieurs nouveaux acteurs haslayout ont été ajoutés à l'écran IE7. Si l'on considère uniquement hasLayout, min/max et width/height se comportent de la même manière, et la position est fixe. la même chose que l'absolu.
position : fixe
min-width : n'importe quelle valeur
même s'il est défini sur 0, l'élément peut obtenir une mise en page.
max-width : n'importe quelle valeur sauf "aucune"
min-height : n'importe quelle valeur
Même s'il est défini sur 0, vous pouvez définir la valeur haslayout=true de l'élément
max-height : n'importe quelle valeur sauf "none"

À propos éléments de niveau en ligne

Pour les éléments en ligne (peuvent être en ligne par défaut, tels que les éléments span ou les éléments avec display : inline)

la largeur et la hauteur déclenchent uniquement hasLayout dans les bizarreries mode de IE5.x et IE6 ou plus récent. Pour IE6, si le navigateur s'exécute en mode de compatibilité standard, les éléments en ligne ignoreront les attributs width ou height, donc la définition de width ou height ne peut pas ordonner à l'élément d'avoir une disposition dans ce cas.
le zoom peut toujours déclencher hasLayout, mais il n'est pas pris en charge dans IE5.0.

Si un élément avec "layout" affiche également : inline, son comportement est très similaire au inline-block mentionné dans le standard : c'est le même qu'un texte ordinaire dans un paragraphe. horizontalement et continuellement, affecté par alignement vertical, et la taille peut être ajustée de manière adaptative en fonction du contenu. Cela peut également expliquer pourquoi dans IE/Win seul, les éléments en ligne peuvent contenir des éléments de niveau bloc avec moins de problèmes, car dans d'autres navigateurs, display: inline signifie en ligne, contrairement à IE/Win, une fois que l'élément en ligne a une mise en page, il a toujours une mise en page. Deviendra un bloc en ligne.

Réinitialiser hasLayout

La réinitialisation des propriétés suivantes à leurs valeurs par défaut dans une autre règle réinitialisera (ou annulera) hasLayout, si aucune autre propriété n'est ajoutée à hasLayout :

largeur, hauteur (définie sur "auto")
largeur maximale, hauteur maximale (définie sur "aucun") (dans IE 7)
position (réglée sur "statique")
flotteur (réglée sur "aucun")
débordement (défini sur "visible") (dans IE 7)
zoom (défini sur "normal")
mode d'écriture (défini de "tb-rl" à "lr-t)

Différence dans l'attribut d'affichage : lors de l'utilisation de "inline-block" Lorsque haslayout = true est défini, même si cet attribut est remplacé par "block" ou "inline" dans une règle distincte, l'indicateur haslayout ne sera pas réinitialisé sur false

Réinitialiser mi-largeur, réglage de mi-. height à leur valeur par défaut de "0" donnera toujours hasLayout, mais IE 7 peut accepter un attribut illégal "auto" pour réinitialiser hasLayout.

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!

Étiquettes associées：

float

source：php.cn

Article précédent：CSS--Mise en page Article suivant：Solution au problème selon lequel l'attribut width des éléments HTML n'a aucun effet

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Derniers articles par auteur