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 :

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

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 :

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

.

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 :