css float clair float haslayout

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

 : 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.

100db36a723c770d327fc0aef2ce13b1,6c04bd5ca3fcae76e30b72ad730ca86d,f5d188ed2c074f8b944552db028f98a1a34de1251f0d9fe1e645927f19a896e8b4d429308760b6c2d20d6300079ed38eb6c5a531a458a2e790c1fd6421739d1c30d1d2c3c8c4fd418a3801ebb45a1534d5fd7aea971a85678ba271703566ebfd, ed126914ed1419bab26abf7cf307b7b9

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!