Comment effacer le flotteur en CSS-tutoriel CSS-php.cn

Comment effacer le flotteur en CSS

王林

Libérer： 2020-03-04 18:07:44

avant

2548 Les gens l'ont consulté

Comment effacer le flotteur en CSS

1. Définir la hauteur de l'élément parent

Rendu :

Comment effacer le flotteur en CSS

Code :

<style>
    * {
        padding: 0;
        margin: 0;
    }
    .header {
        height: 30px;
        line-height: 30px;
        background-color: #333;
    }
    .header a {
        color: #fff;
        text-decoration: none;
    }
    ul {
        float: right;
    }
    li {
        float: left;
        list-style: none;
        padding-right: 20px;
    }
</style>
 
<div class="header">
    <ul>
        <li><a href="#">首页</a></li>
        <li><a href="#">文章</a></li>
        <li><a href="#">问答</a></li>
        <li><a href="#">帮助</a></li>
        <li><a href="#">关于</a></li>
    </ul>
</div>

Copier après la connexion

(Tutoriel recommandé : Tutoriel de démarrage CSS)

Méthode du mur extérieur : utilisez un élément vide au niveau du bloc pour ajouter un style CSS clear à clear float

<🎜. >Remarque : La marge ne peut pas être ajoutée aux éléments de niveau bloc avec l'attribut de style clair ajouté

Rendu :

Comment effacer le flotteur en CSS

Code :

<style>
    * {
        padding: 0;
        margin: 0;
    }
    .header {
        /* background-color: #333; */
    }
    .header a {
        /* color: #fff; */
        text-decoration: none;
    }
    ul {
        float: right;
    }
    li {
        float: left;
        list-style: none;
        padding: 5px 20px;
    }
 
    .clearfix {
        height: 10px;
        background-color: red;
        clear: both;
    }
 
    .main {
        color: #fff;
        height: 100px;
        background-color: blue;
    }
</style>
 
<div class="header">
    <ul>
        <li><a href="#">首页</a></li>
        <li><a href="#">文章</a></li>
        <li><a href="#">问答</a></li>
        <li><a href="#">帮助</a></li>
        <li><a href="#">关于</a></li>
    </ul>
     
</div>
 
<div class="clearfix"></div>
     
<div class="main">主要内容</div>

Copier après la connexion

<🎜. > 3. Méthode Inner Wall : utilisez un élément vide au niveau du bloc pour ajouter un style CSS clair pour effacer le flottant

Rendu :

Comment effacer le flotteur en CSS Code :

<style>
    * {
        padding: 0;
        margin: 0;
    }
    .header {
        background-color: #333;
    }
    .header a {
        color: #fff;
        text-decoration: none;
    }
    ul {
        float: right;
    }
    li {
        float: left;
        list-style: none;
        padding: 5px 20px;
    }
    .clearfix {
        clear: both;
    }
</style>
 
<div class="header">
    <ul>
        <li><a href="#">首页</a></li>
        <li><a href="#">文章</a></li>
        <li><a href="#">问答</a></li>
        <li><a href="#">帮助</a></li>
        <li><a href="#">关于</a></li>
    </ul>
    <div class="clearfix"></div>
</div>

Copier après la connexion

La méthode du mur présente des avantages relatifs par rapport à la méthode du mur extérieur :

Une fois la méthode du mur intérieur définie, l'élément parent de l'élément flottant sera étiré, ce qui signifie qu'il a une hauteur

4. Donnez l'élément flottant Ajouter overflow:hidden

à l'élément parent Rendu :

Comment effacer le flotteur en CSS Code :

<style>
    * {
        padding: 0;
        margin: 0;
    }
    .header {
        background-color: #333;
        overflow: hidden;
    }
    .header a {
        color: #fff;
        text-decoration: none;
    }
    ul {
        float: right;
    }
    li {
        float: left;
        list-style: none;
        padding: 5px 20px;
    }
 
    .main {
        color: #fff;
        height: 100px;
        background-color: blue;
    }
</style>
 
<div class="header">
    <ul>
        <li><a href="#">首页</a></li>
        <li><a href="#">文章</a></li>
        <li><a href="#">问答</a></li>
        <li><a href="#">帮助</a></li>
        <li><a href="#">关于</a></li>
    </ul>
</div>
     
<div class="main">主要内容</div>

Copier après la connexion

. Pour plus de contenu lié à la programmation, veuillez faire attention à la colonne php Chinese Net

Introduction à la programmation

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!