Explication détaillée de l'impact du flottant en CSS et comment supprimer le flottant

• Pour le premier entretien téléphonique, l'intervieweur m'a demandé quelles méthodes connaissez-vous pour supprimer le flottant ?
  Voici ma réponse : "Il existe deux méthodes. L'une consiste à utiliser "clear : les deux" sur l'élément qui doit être supprimé de float ; l'autre consiste à utiliser "overflow:hidden". Pour être honnête, quand j'ai parlé de la deuxième méthode, je ne l'ai pas pratiquée. Je l'ai juste lu et je l'ai dit vaguement.
  

• Cette question a également été posée lors du deuxième entretien, mais en raison des leçons tirées du premier entretien, je suis revenu et j'ai lu un livre. Il y a un chapitre spécial dans le "Guide de conception CSS". qui parle de plusieurs méthodes pour supprimer les flottants. Mais le temps presse, je n'ai lu le livre qu'une seule fois et je ne l'ai pas tapé avec mes mains, alors quand j'ai demandé, j'en ai répertorié 1234.

  1 clair : les deux ; 🎜>2. débordement : caché ;
  3. Élément parent flottant
  4. Ajoutez un élément déflotant après l'élément flottant
  Après avoir interviewé ma sœur, elle a ajouté : "Regardez cet élément horizontal
  colonne de navigation
  . Il doit être implémenté en flottant, donc il ne peut certainement pas utiliser overflow:hidden; cela devrait être parce que s'il y a un sous-menu dans la barre de ligne, il sera invisible ?" . Ma réponse à l'époque était Ajouter un élément qui supprime les éléments flottants après l'élément flottant. L'intervieweur n'a pas dit si c'était bien ou mal Vous devez toujours faire une navigation vous-même
  
  <.>

J'ai déjà écrit une note ici sur le principe du flottant. Aujourd'hui, j'écrirai une autre note sur la suppression du flottant. Le contenu provient du livre "CSS Design Guide"

.

L'impact du flottement

• Performances des navigateurs modernes
Placer deux éléments en ligne adjacents, si le second Si un élément en ligne est flottant à gauche, puis une fois l'élément en ligne défini pour flotter, son
affichage
• sera modifié en bloc ; mais sa taille sera affichée en fonction du paramètre ou de la taille de son contenu et n'occupera pas tout l'espace de la ligne, l'élément en ligne à côté sera derrière l'élément flottant dans cette ligne et ne sera pas sur un pied d'égalité avec l'élément flottant

  Mais s'il est à côté d'un élément de niveau bloc en ligne avec une largeur définie, alors. cet élément de niveau bloc en ligne ne sera pas sur un pied d'égalité avec l'élément flottant. L'élément sera également derrière l'élément flottant
  S'il est à côté d'un élément de niveau bloc, alors cet élément de niveau bloc occupera. l'espace de l'élément en ligne qui est défini pour flotter. Je ne peux pas vous dire pourquoi
  Dans IE7 et les versions antérieures du navigateur
  ie, les éléments en ligne à côté de
  sera sous une nouvelle ligne d'éléments flottants. N'est-ce pas encore plus étrange 🎜>

Une fois l'élément de niveau bloc flottant
• , le navigateur reprendra l'espace initialement occupé par l'élément de niveau bloc et l'élément qui le suit immédiatement seront élevés au même niveau que l'élément flottant si l'espace le permet. Au même niveau, l'élément de niveau bloc qui est défini sur float conservera sa position d'origine et silencieusement. observez les éléments qu’il affecte changer.

  La bordure de l'élément parent de l'élément flottant sera également réduite aux éléments enfants qui ne flottent pas dans l'élément parent.
  

  Une fois l'élément en ligne flotté
En fait, cela semble n'avoir jamais été configuré ainsi dans les exercices que je fais actuellement, mais cela apporte une expérience différente.

• 
  
  

  Quant au flottement des éléments en ligne, je ne l'ai pas rencontré en faisant référence au code source d'autres sites Web, je vais donc le laisser tranquille d'abord.

• 
  Voici plusieurs méthodes pour entourer des éléments flottants et les situations appropriées pour chaque méthode.

Ajoutez simplement un élément enfant à la balise html et appliquez-y l'attribut clair

.
Mais si nous ne voulons particulièrement pas ajouter cet élément de performance pure, nous pouvons utiliser CSS pour ajouter cet élément clair. Ajouter une classe à la section :

•   <section >
        <img src="7f0ff.png" alt="" style="float:left" />
        <p>it s fun to float</p>
        <p style="clear:left;"></p>
    </section>
    <footer>
        here is the footer element.
    </footer>

  Méthode 1 :
Ajouter : overflow:hidden à l'élément parent

• Cette méthode force le élément parent Entoure les éléments enfants flottants. .clearfixEn fait : le véritable objectif de l'instruction overflow: Hidden est d'empêcher l'élément conteneur d'être étiré par un contenu surdimensionné. Après avoir appliqué overflow: masqué, l'élément conteneur conserve toujours sa largeur et sa hauteur définies, et le contenu du texte surdimensionné sera coupé par le conteneur. De plus, overflow:hidden a un autre effet, c'est-à-dire qu'il peut forcer de manière fiable l'élément parent à inclure ses éléments enfants flottants.

  Cependant, la conséquence est que le contenu du texte ne sera plus visible une fois qu'il dépassera la largeur définie.

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

• Méthode 2 : Faire flotter l'élément parent en même temps
  En fait, cela ne flotte pas clairement pour l'ensemble de la mise en page du site Web, cela fait simplement entourer l'élément parent l'élément enfant flottant, mais bien que l'élément parent flottant entoure les éléments enfants flottants, cela ne résout pas l'impact de l'élément parent flottant lui-même sur la mise en page de l'ensemble du site Web. J'ai vu que certains codes sources de sites Web aiment toujours l'utiliser. méthode, puis dans ceci L'élément parent flottant est entouré d'un élément parent, et la largeur et la hauteur sont définies pour garantir qu'il n'affecte pas la disposition des autres contenus de la page Web.

• Méthode 3 : Ajouter un élément clair non flottant
  consiste à ajouter un élément enfant non flottant à la fin de l'élément parent, puis effacer le flotteur de l'élément enfant.
  Cependant, il existe deux façons d'ajouter un élément enfant à la fin de l'élément conteneur en tant qu'élément clair.

Ces trois méthodes sont implémentées en utilisant des éléments parents pour entourer les éléments enfants flottants.
Analysez ces trois méthodes :
1. Vous ne pouvez pas appliquer overflow:hidden sur l'élément de niveau supérieur du menu déroulant  ; ne soit pas affiché.
2. Vous ne pouvez pas utiliser la technologie d'élément parent flottant sur un élément qui a automatiquement marge centrée, sinon elle ne sera plus centrée.
Mais que se passe-t-il s'il n'y a pas d'élément parent dans certains cas ?
Je dirais certainement, ajoutez-en un de plus, ce n'est pas gênant, mais cela augmentera la profondeur de traversée
Si un élément veut être affecté par l'élément flottant, mais ne veut pas non plus que les éléments après lui le soient. affecté par l'élément flottant. Pour affecter l'impact, vous pouvez ajouter un élément de niveau bloc à l'intérieur de cet élément, puis effacer le flotteur pour cet élément de niveau bloc Une autre chose à noter est que vous ne devez pas. définissez une hauteur supplémentaire pour cet élément, sinon l'effet ne sera pas efficace. J'espère que les personnes qui liront cet article pourront le tester par elles-mêmes.

[Recommandations associées]

1. Tutoriel vidéo CSS en ligne gratuit

2. Manuel CSS en ligne

3. php.cn Dugu Jiujian (2) - tutoriel vidéo 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!