Maison > Article > interface Web > Implémentation CSS pour résoudre les problèmes flottants

Implémentation CSS pour résoudre les problèmes flottants

零到壹度original: 2018-03-27 16:36:471712parcourir

Tout d'abord, nous devons réfléchir à une question : Pourquoi devrions-nous vider le flotteur ? Lorsque je faisais une petite démo, j'ai rencontré un problème lorsque l'élément enfant flottait, la couleur de fond de l'élément parent disparaissait ? On peut dire qu'avec mon niveau de débutant à l'époque, je ne savais pas pourquoi la couleur de fond de l'élément parent manquait. J'avais clairement défini la couleur de fond. Se pourrait-il que le format de couleur soit erroné ? Ou le navigateur est-il incompatible et s'agit-il d'un hack CSS ? ? ? ? ? ? ? ? Toutes les suppositions pointent vers la couleur d’arrière-plan, tout est de la faute de la couleur d’arrière-plan.

Pourquoi devons-nous nettoyer les flotteurs ?

J'ai continué à me débattre dans la fosse et j'ai obtenu la réponse. Ce n'était pas la faute de la couleur de fond. Mais ses éléments enfants. Lorsque l'élément enfant flotte, la hauteur de l'élément parent devient 0. Pourquoi

La raison est que l'élément parent ne définit pas de hauteur ? est déterminé par l'élément enfant. Les éléments le maintiennent. Lorsque l'élément enfant flotte, l'élément enfant est hors du flux de documents et l'élément parent est toujours dans le flux de documents. À ce stade, le contenu de l'élément parent n'a rien, donc la hauteur de l'élément parent devient celle d'origine. hauteur non définie (0) . S'il y a des éléments non flottants dans le contenu de l'élément parent, la hauteur de l'élément parent sera supportée par la hauteur la plus élevée de ces éléments. Comme le montre l'image :

Code HTML
<p>
        <img src="./2.png" alt="">
        <img src="./1.png" alt="">
        <img src="./1.png" alt="">
</p>
Lorsqu'il n'y a pas de flottant :

Code HTML
<p>        //此时大图片左浮动，及下图的效果
        <img src="./2.png" alt="" style = "float: left;">
        <img src="./1.png" alt="">
        <img src="./1.png" alt="">
</p>
Situation en flottant : (Grande image flottante : gauche ; Petite les images restent inchangées)

peut être dérivé de l'analyse ci-dessus. Les éléments enfants flottants provoqueront un "effondrement en hauteur" de l'élément parent.

Comment effacer le flotteur ?

Il existe de nombreuses façons de nettoyer les flotteurs. Actuellement, il existe environ huit façons de nettoyer les flotteurs. Mais il existe deux manières les plus courantes de l'utiliser dans les projets :
1. Ajouter une pseudo-classe : after; .Ajouter une pseudo-classe : après

Ajoutez un correctif de classe à l'élément parent et définissez la pseudo-classe : après pour cette classe.

Regardez ! C'est la première façon d'effacer un flotteur. C'est également un moyen populaire d'effacer les objets flottants.
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .clearfix:after {            content: " ";            display: block;            clear: both;        }
        .a {            float: left;        }
    </style></head><body>
    <p class="container clearfix">
        <img src="./2.png" alt="">
        <img src="./1.png" alt="">
        <img src="./1.png" alt="">
    </p>
  </body>
  </html>
2. Déclencheur BFC

1) Qu’est-ce que BFC ?

BFC (Block Formatting Context) est le mode de rendu CSS pour la disposition du modèle de boîte dans les pages Web. Son système de positionnement appartient au flux documentaire régulier. Extrait du W3C : Éléments flottants, positionnés de manière absolue, blocs en ligne, cellules de tableau, légendes de tableau et éléments de débordement dont la valeur n'est pas visible (sauf lorsque cette valeur a été passé Lorsque la fenêtre d'affichage est atteinte), un nouveau contexte de formatage au niveau du bloc sera créé.
La citation ci-dessus résume assez bien la façon dont un BFC est formé. Mais redéfinissons-le d'une autre manière pour mieux le comprendre. Un BFC est une boîte HTML et remplit au moins une des conditions suivantes :
float的值不为none

position的值不为static或者relative

display的值为 table-cell, table-caption, inline-block, flex, 或者
inline-flex中的其中一个

overflow的值不为visible

2) 如何用BFC清除浮动

粗暴的总结就是让浮动块包含在同一个BFC中加同时（也可以理解为包含块加属性overflow:hidden）。
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .container {            overflow: hidden;        }
        .a {            float: left;        }
    </style></head><body>
    <p>
        <img src="./2.png" alt="">
        <img src="./1.png" alt="">
        <img src="./1.png" alt="">
    </p>
   </body>
   </html>
有利也有弊，下面简单指出BFC的缺点：
- display:table可能会产生一些问题
- overflow:scroll可能会显示不必要的滚动条
- float:left将会把元素置于容器的左边，其他元素环绕着它
- overflow:hidden将会剪切掉溢出的元素

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!

css html Static Float display overflow 伪类 flex table

Déclaration：

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

Article précédent：Explication détaillée de la méthode de centrage CSSArticle suivant：Explication détaillée de la méthode de centrage CSS

Articles Liés

Voir plus