communauté
Apprendre
Bibliothèque d'outils
Outils d'IA
Loisirs
recherche
Français
Maison interface Web tutoriel HTML 浅谈 CSS 清除浮动的6种方法_html/css_WEB-ITnose

浅谈 CSS 清除浮动的6种方法_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
Jun 21, 2016 am 09:04 AM

  • 额外标签法

  • 使用:after 伪元素

  • 给父元素定高

  • 利用overflow:hidden;属性

  • 父元素浮动

  • 父元素处于绝对定位

    • 在开发网页的时候经常需要用到各种浮动，此时便需要及时的清除浮动，否则将会导致布局出现问题

    引出问题：

    1

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <style>        .outer{            border: 1px solid black;            width:300px;        }        .inner{            width: 50px;            height: 50px;            background-color: #ff4400;            margin-right: 20px;            float: left;        }        .footer{            background-color: #005FC3;            width: 200px;            height: 100px;        }    </style></head><body>    <div class="outer">        <div class="inner"></div>        <div class="inner"></div>        <div class="inner"></div>    </div>    <div class="footer"></div></body></html>

    Copier après la connexion

    可以看出本应包住3个 inner DIV的 outer DIV 却没有包住他们，此刻只剩一条由上写边框贴合组成的线，同时 footer DIV元素也跑到了三个浮动元素的底下

    解决办法：

    1.使用额外标签发

    1

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <style>        .outer{            border: 1px solid black;            width: 300px;        }        .inner{            width: 50px;            height: 50px;            background-color: #ff4400;            margin-right: 20px;            float: left;        }        .footer{            background-color: #005FC3;            width: 200px;            height: 100px;        }        .clearfix{            clear: both;        }    </style></head><body>    <div class="outer">        <div class="inner"></div>        <div class="inner"></div>        <div class="inner"></div>        <div class="clearfix"></div>    </div>    <div class="footer"></div></body></html>

    Copier après la connexion

    这是早期普遍使用的方法，但是对于有代码洁癖的人来说，解决的不够完美

    2.使用:after 为元素

    1

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <style>        .outer{            border: 1px solid black;            width: 300px;        }        .inner{            width: 50px;            height: 50px;            background-color: #ff4400;            margin-right: 20px;            float: left;        }        .footer{            background-color: #005FC3;            width: 200px;            height: 100px;        }        .clearfix:after{  /*最简方式*/            content: '';            display: block;            clear: both;        }        /* 新浪使用方式        .clearfix:after{             content: '';            display: block;            clear: both;            height: 0;            visibility: hidden;        }        */        .clearfix{ /*兼容 IE*/            zoom: 1;        }    </style></head><body>    <div class="outer clearfix">        <div class="inner"></div>        <div class="inner"></div>        <div class="inner"></div>    </div>    <div class="footer"></div></body></html>

    Copier après la connexion

    3.给父元素定高

    1

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <style>        .outer{            border: 1px solid black;            width: 300px;            height: 50px;        }        .inner{            width: 50px;            height: 50px;            background-color: #ff4400;            margin-right: 20px;            float: left;        }        .footer{            background-color: #005FC3;            width: 200px;            height: 100px;        }    </style></head><body>    <div class="outer">        <div class="inner"></div>        <div class="inner"></div>        <div class="inner"></div>    </div>    <div class="footer"></div></body></html>

    Copier après la connexion

    4.利用 overflow:hidden 属性

    1

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <style>        .outer{            border: 1px solid black;            width: 300px;            overflow: hidden;            zoom: 1;/*兼容 IE*/        }        .inner{            width: 50px;            height: 50px;            background-color: #ff4400;            margin-right: 20px;            float: left;        }        .footer{            background-color: #005FC3;            width: 200px;            height: 100px;        }    </style></head><body>    <div class="outer">        <div class="inner"></div>        <div class="inner"></div>        <div class="inner"></div>    </div>    <div class="footer"></div></body></html>

    Copier après la connexion

    5.父元素浮动

    当父元素浮动的时候，无需为子元素的浮动清除浮动,布局时经常用到

    1

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <style>        .outer{            border: 1px solid black;            width: 300px;            float: left;        }        .inner{            width: 50px;            height: 50px;            background-color: #ff4400;            margin-right: 20px;            float: left;        }        .footer{            background-color: #005FC3;            width: 200px;            height: 100px;        }    </style></head><body>    <div class="outer">        <div class="inner"></div>        <div class="inner"></div>        <div class="inner"></div>    </div>    <div class="footer"></div></body></html>

    Copier après la connexion

    可以看出虽然 outer DIV 消除了塌陷现象，但由于其也发生了浮动故，其后元素若无处于正常文档流，会被跌在底下。
    如果要解决可以参考前面的办法。

    例如：

    1

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <style>        .outer{            border: 1px solid black;            width: 300px;            float: left;        }        .inner{            width: 50px;            height: 50px;            background-color: #ff4400;            margin-right: 20px;            float: left;        }        .footer{            background-color: #005FC3;            width: 200px;            height: 100px;        }        .clearfix:after{            content: "";            display: block;            clear: both;        }        .clearfix{            zoom: 1;        }    </style></head><body>    <div class="outer">        <div class="inner"></div>        <div class="inner"></div>        <div class="inner"></div>    </div>    <div class="clearfix"></div>    <div class="footer"></div></body></html>

    Copier après la connexion

    6.父元素处于绝对定位

    1

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <style>        .outer{            border: 1px solid black;            width: 300px;            position: absolute;        }        .inner{            width: 50px;            height: 50px;            background-color: #ff4400;            margin-right: 20px;            float: left;        }        .footer{            background-color: #005FC3;            width: 200px;            height: 100px;        }    </style></head><body>    <div class="outer">        <div class="inner"></div>        <div class="inner"></div>        <div class="inner"></div>    </div>    <div class="clearfix"></div>    <div class="footer"></div></body></html>

    Copier après la connexion


    与上一个方法同理，由于绝对定位已脱离正常文档流，故出现相同情况，解决办法依旧可以使用以上办法结合，灵活多变。

    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

    Outils d'IA chauds

    Undresser.AI Undress

    Undresser.AI Undress

    Application basée sur l'IA pour créer des photos de nu réalistes

    AI Clothes Remover

    AI Clothes Remover

    Outil d'IA en ligne pour supprimer les vêtements des photos.

    Undress AI Tool

    Undress AI Tool

    Images de déshabillage gratuites

    Clothoff.io

    Clothoff.io

    Dissolvant de vêtements AI

    Video Face Swap

    Video Face Swap

    Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !

    Afficher plus

    Article chaud

    Assassin's Creed Shadows: Solution d'énigmes de coquille
    1 Il y a quelques mois By DDD
    Quoi de neuf dans Windows 11 KB5054979 et comment résoudre les problèmes de mise à jour
    3 Il y a quelques semaines By DDD
    Où trouver la courte de la grue à atomide atomique
    1 Il y a quelques mois By DDD
    Comment réparer KB5055523 ne parvient pas à s'installer dans Windows 11?
    2 Il y a quelques semaines By DDD
    Inzoi: Comment postuler à l'école et à l'université
    3 Il y a quelques semaines By DDD
    Afficher plus

    Outils chauds

    Bloc-notes++7.3.1

    Bloc-notes++7.3.1

    Éditeur de code facile à utiliser et gratuit

    SublimeText3 version chinoise

    SublimeText3 version chinoise

    Version chinoise, très simple à utiliser

    Envoyer Studio 13.0.1

    Envoyer Studio 13.0.1

    Puissant environnement de développement intégré PHP

    Dreamweaver CS6

    Dreamweaver CS6

    Outils de développement Web visuel

    SublimeText3 version Mac

    SublimeText3 version Mac

    Logiciel d'édition de code au niveau de Dieu (SublimeText3)

    Afficher plus

    Sujets chauds

    Où se trouve l'entrée de connexion pour la messagerie Gmail ?
    7771
    15
    Tutoriel Java
    1644
    14
    Tutoriel CakePHP
    1399
    52
    Tutoriel Laravel
    1296
    25
    Tutoriel PHP
    1234
    29
    Afficher plus
    Related knowledge
    HTML est-il facile à apprendre pour les débutants? HTML est-il facile à apprendre pour les débutants? Apr 07, 2025 am 12:11 AM

    HTML convient aux débutants car il est simple et facile à apprendre et peut rapidement voir les résultats. 1) La courbe d'apprentissage de HTML est fluide et facile à démarrer. 2) Il suffit de maîtriser les balises de base pour commencer à créer des pages Web. 3) Flexibilité élevée et peut être utilisée en combinaison avec CSS et JavaScript. 4) Les ressources d'apprentissage riches et les outils modernes soutiennent le processus d'apprentissage.

    Les rôles de HTML, CSS et JavaScript: responsabilités de base Les rôles de HTML, CSS et JavaScript: responsabilités de base Apr 08, 2025 pm 07:05 PM

    HTML définit la structure Web, CSS est responsable du style et de la mise en page, et JavaScript donne une interaction dynamique. Les trois exercent leurs fonctions dans le développement Web et construisent conjointement un site Web coloré.

    Comprendre HTML, CSS et JavaScript: un guide pour débutant Comprendre HTML, CSS et JavaScript: un guide pour débutant Apr 12, 2025 am 12:02 AM

    WebDevelopmentReliesOnHTML, CSS, etjavascript: 1) HTMLSTRUCTURESCONTENT, 2) CSSSTYLESIT, et3) JavascriptAdddsInterActivity, Forming TheasisofmodernweBEBExperiences.

    Quel est un exemple d'une balise de départ dans HTML? Quel est un exemple d'une balise de départ dans HTML? Apr 06, 2025 am 12:04 AM

    Anexampleofastartingtaginhtmlis, qui abinginsaparagraph.startingtagsaressentialtinhtmlastheyinitiateelements, définit les éventualités, et la faculté de réduction des pages et de la construction de la création.

    Gitee Pages STATIQUE Le déploiement du site Web a échoué: comment dépanner et résoudre les erreurs de fichier unique 404? Gitee Pages STATIQUE Le déploiement du site Web a échoué: comment dépanner et résoudre les erreurs de fichier unique 404? Apr 04, 2025 pm 11:54 PM

    GiteEpages STATIQUE Le déploiement du site Web a échoué: 404 Dépannage des erreurs et résolution lors de l'utilisation de Gitee ...

    Comment utiliser CSS3 et JavaScript pour réaliser l'effet de la diffusion et de l'agrandissement des images environnantes après avoir cliqué? Comment utiliser CSS3 et JavaScript pour réaliser l'effet de la diffusion et de l'agrandissement des images environnantes après avoir cliqué? Apr 05, 2025 am 06:15 AM

    Pour obtenir l'effet de la diffusion et de l'élargissement des images environnantes après avoir cliqué sur l'image, de nombreuses conceptions Web doivent obtenir un effet interactif: cliquez sur une certaine image pour faire les environs ...

    Comment implémenter la disposition adaptative de la position de l'axe y dans l'annotation Web? Comment implémenter la disposition adaptative de la position de l'axe y dans l'annotation Web? Apr 04, 2025 pm 11:30 PM

    L'algorithme adaptatif de la position de l'axe y pour la fonction d'annotation Web Cet article explorera comment implémenter des fonctions d'annotation similaires aux documents de mots, en particulier comment gérer l'intervalle entre les annotations ...

    HTML, CSS et JavaScript: outils essentiels pour les développeurs Web HTML, CSS et JavaScript: outils essentiels pour les développeurs Web Apr 09, 2025 am 12:12 AM

    HTML, CSS et JavaScript sont les trois piliers du développement Web. 1. HTML définit la structure de la page Web et utilise des balises telles que, etc. 2. CSS contrôle le style de page Web, en utilisant des sélecteurs et des attributs tels que la couleur, la taille de la police, etc. 3. JavaScript réalise les effets dynamiques et l'interaction, par la surveillance des événements et les opérations DOM.

    See all articles