CSS flottantLOGIN

CSS flottant

L'attribut impliqué ici est float, et sa valeur peut être attribuée comme :

left : L'élément flotte vers la gauche à droite : l'élément flotte vers la droite aucun : pas de flottement hériter : Hériter des attributs flottants du parent

Il y a aussi l'attribut clear : Principalement utilisé pour supprimer les attributs flottants dans toutes les directions (y compris les attributs hérités)

Créons d'abord un fichier html et CSS de base. Voici le contenu de base :

html:

   <div class="qd"></div>
    <div class="wd"></div>
    <div class="ed"></div>
<. 🎜>CSS

.qd{    width: 100px;    height: 100px;    background-color: lightskyblue;
}.wd{    width: 100px;    height: 100px;    background-color: lightseagreen;
}.ed{    width: 100px;    height: 100px;    background-color: lightsalmon;
}

Ce qui suit est l'effet d'affichage :

QQ截图20161211183019.png

Sur cette base, nous ajoutons tous des attributs float, les deux premiers va à gauche et le dernier à droite pour voir quel sera l'effet :

float: left;float: right;

Rendu

QQ截图20161211183117.png

Tout comme quelques petites choses fonctionnant dans une pièce, vous pouvez spécifier la direction dans laquelle elles courent, et elles courront jusqu'à la frontière, autant leur limiter un espace (mettre les trois divs dans un seul div) ). Comme ceci :

<div class="container">
    <div class="qd"></div>
    <div class="wd"></div>
    <div class="ed"></div>
</div>

Ensuite, vous verrez :

QQ截图20161211183439.png

Mais parfois, nous n'avons pas besoin de flotteurs, comme comme indiqué ci-dessous, nous voulons ajouter une phrase sous l'effet ci-dessus, puis nous ajoutons directement un

<div class="text">hello php</div>

dans le conteneur. Ensuite, nous verrons

QQ截图20161211183559.png

.

Cela montre que ce div hérite également de l'attribut flottant. Si nous voulons que la police aille en dessous, nous devons annuler le flottement du div de police. Ensuite, nous ajouterons le contenu suivant au CSS :

.text{    clear: both;
}
<🎜. >Rendu :

section suivante

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>浮动模型</title> <style type="text/css"> div{ border:2px red solid; width:200px; height:400px; float:left; } </style> </head> <body> <div id="div1">栏目1</div> <div id="div2">栏目2</div> </body> </html>
soumettreRéinitialiser le code
chapitredidacticiel