Méthode de mise en page de page Web Clear Float

Cette fois, je vais vous présenter la méthode de mise en page de la page Web Effacer le flottant, et quelles sont les Précautions pour effacer le flottant Ce qui suit est un cas pratique, jetons un coup d'œil. .

Le problème de hauteur de la boîte

1. La hauteur de la boîte dans le flux standard peut être prise en charge par la hauteur du contenu ;
2. Le contenu flottant dans le flux flottant ne peut pas. soutenir la hauteur de la boîte ;

Pourquoi devons-nous dégager le flotteur ?

Entre les boîtes adjacentes, si la boîte avant n'a pas de hauteur, alors l'élément flottant dans la boîte arrière ressemblera pour l'élément flottant dans la boîte avant. Cela entraînera une confusion dans l'interface, vous devez donc effacer le flotteur

Effacer la méthode float :

Solution :

Définir la hauteur de l'élément parent précédent

Remarques :

Dans le développement d'entreprise, nous pouvons écrire la hauteur sans écrire la hauteur, cette méthode est donc rarement utilisée ;

CSS :

   <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box1{
            height: 20px;  //给前面盒子设置高度
            background-color: red;
        }
        .box2{
            background-color: green;
        }
        .box1 p{
            width: 100px;
            background-color: blue;
        }
        .box2 p{
            width: 100px;
            background-color: yellow;
        }
        p{
            float: left;
        }    </style>

body :

<div class="box1">
    <p>我是文字1</p>
    <p>我是文字1</p>
    <p>我是文字1</p></div><div class="box2">
    <p>我是文字2</p>
    <p>我是文字2</p>
    <p>我是文字2</p>
</div>

Effacer la méthode flottante deux :

Solution :

Ajoutez l'attribut clear:both à ce qui suit ; box

valeur d'attribut claire :

aucun : valeur par défaut, trier selon les règles de tri des éléments flottants (flottant gauche, rechercher le flotteur gauche, flotteur droit, rechercher le flotteur droit)
gauche : ne cherchez pas l'élément flottant gauche précédent (c'est-à-dire : ne pas afficher sur la même ligne que l'élément flottant gauche précédent)
droite : ne cherchez pas l'élément flottant droit précédent
les deux : Ne recherchez pas l'élément flottant gauche et l'élément flottant droit précédents

Remarque :

Lorsque nous ajoutons l'attribut clear à un élément, l'attribut margin de cet attribut deviendra invalide ; n'est pas recommandé d'utiliser

CSS :

<style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            border: 1px solid #000;
        }
        .box1{
            background-color: red;
        }
        .box2{
            background-color: green;
            clear: both; //给后面的盒子添加clear:both;属性
            margin-top: 28px;
        }
        .box1 p{
            width: 100px;
            background-color: blue;
        }
        .box2 p{
            width: 100px;
            background-color: yellow;
        }
        p{
            float: left;
        }    </style>

Troisième méthode flottante claire :

Solution :

Méthode du mur extérieur : ajouter un bloc supplémentaire- élément de niveau entre deux boîtes avec des éléments enfants flottants ; et définissez l'attribut clear: Both ;

Remarque :

La méthode du mur extérieur permet à la deuxième boîte d'utiliser l'attribut margin-top.
la méthode du mur extérieur ne permet pas à la première boîte d'utiliser l'attribut margin-bottom,
Cependant, l'effet de marge peut être obtenu en définissant la hauteur de balises supplémentaires
Cette technologie est ; largement utilisé dans Sohu, mais en raison de la nécessité d'ajouter un grand nombre de balises dénuées de sens, il n'est pas recommandé

CSS :

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .box1{
            background-color: red;            /*margin-bottom: 10px;*/ //外墙法不可以让第一个盒子使用margin-bottom属性,
        }
        .box2{
            background-color: green;            /*margin-top: 10px;*/  //外墙法它可以让第二个盒子使用margin-top属性,
        }
        .box1 p{
            width: 100px;
            background-color: blue;
        }
        .box2 p{
            width: 100px;
            background-color: yellow;
        }
        p{
            float: left;
        }
        .wall{
            clear: both; //设置clear: both;属性;
        }
        .h20{
            height: 20px; //设置额外标签的高度来实现margin效果;
            background-color: skyblue;
        }
    </style>
<div class="box1">
    <p>我是文字1</p>
    <p>我是文字1</p>
    <p>我是文字1</p></div><div class="wall h20"></div> //外墙法:在两个有浮动子元素的盒子之间添加一个额外的块级元素;<div class="box2">
    <p>我是文字2</p>
    <p>我是文字2</p>
    <p>我是文字2</p></div>

Effacer la méthode flottante quatre :

< ; 🎜>Solution :

Méthode du mur intérieur :

1 Ajoutez tous les éléments enfants dans la première case en dernier Un élément supplémentaire au niveau du bloc,
2 Définissez clear : les deux attributs pour ce niveau de bloc supplémentaire ; element

Remarque :

Méthode du mur intérieur Il peut créer la deuxième boîte En utilisant l'attribut margin-top

méthode du mur intérieur, il peut faire en sorte que la première boîte utilise l'attribut margin-bottom

<a>内墙法会自动撑起盒子的高度,所以可以直接设置margin属性</a>

Quelle est la différence entre la méthode du mur extérieur et la méthode du mur intérieur ?

Méthode du mur extérieur Elle ne peut pas supporter la hauteur de la première boîte, mais la méthode du mur intérieur peut supporter la hauteur de la première case

Dans le développement d'entreprise, la méthode des cloisons de séparation n'est pas couramment utilisée pour effacer le flottement (méthode de séparation : méthode des murs extérieurs et méthode des murs intérieurs)

CSS :

   <style>
        *{            margin: 0;            padding: 0;
        }        .box1{            background-color: red;            /*margin-bottom: 10px;*/
        }        .box2{            background-color: green;            /*margin-top: 10px;*/
        }        .box1 p{            width: 100px;            background-color: blue;
        }        .box2 p{            width: 100px;            background-color: yellow;
        }        p{            float: left;
        }        .wall{            clear: both;
        }        .h20{            height: 20px;            background-color: skyblue;
        }    </style></head>
<div class="box1">
    <p>我是文字1</p>
    <p>我是文字1</p>
    <p>我是文字1</p>
    <div class="wall h20"></div> //设置内墙</div><div class="box2">
    <p>我是文字2</p>
    <p>我是文字2</p>
    <p>我是文字2</p></div>

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez faire attention aux autres sites Web chinois php Articles connexes !

Lecture recommandée :

Arrière-plan et sprites CSS

Comment utiliser le mode d'affichage 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!