Introduction aux flotteurs clairs et aux flotteurs fermés

Cet article vous apporte une introduction à la suppression et à la fermeture des flotteurs. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

Pourquoi devrions-nous effacer le float

• Élément enfant float:left quitter le flux de documents entraînera l'effondrement de l'élément parent (impossible de le faire) attendez)

• L'élément parent est pris en charge par les éléments enfants

• Clear float clear:both

<h1>清除浮动</h1>
<div class="border-div clear">
    <div class="div1">
        
    </div>
    <div class="div2">
        
    </div>
</div>


// 伪元素 :after
.clear:after{
    clear:both;
    content:".";
    display:table;
    width:0;
    height:0;
    visibility:hidden;
}

• Flotteur fermé - Ajouter des éléments supplémentaires clear:both

L'élément parent ne définit pas la hauteur

子元素 float:left

额外增加元素 clear:both

<div class="main">
    <div class="sub"></div>
    <div class="sub"></div>
    <div style="clear:both"></div>
</div>

• Flotteur fermé -- utilisez br et ses propres attributs html

== Remarque == clear=all Attribut obsolète (moz)

<div class="main">
    <div class="sub"></div>
    <div class="sub"></div>
    <br clear="all">
</div>

• Flotteur fermé - L'élément parent définit le débordement : caché

<div class="main">
    <div class="sub"></div>
    <div class="sub"></div>
</div>

• Flottant fermé - L'élément parent définit l'affichage :table

<div class="main">
    <div class="sub"></div>
    <div class="sub"></div>
</div>

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!