Explication détaillée du CSS utilisant l'attribut float pour contrôler le div flottant à gauche et à droite

Cet article vous apporte des connaissances pertinentes sur css, qui présente principalement les problèmes liés à l'attribut float contrôlant le flottement gauche et droit des divs. Floating, comme son nom l'indique, signifie flotter. Cela fait référence au phénomène selon lequel un élément est séparé du flux de documents et suspendu au-dessus de l'élément parent. Jetons-y un coup d'œil. J'espère que cela sera utile à tout le monde.

(Partage vidéo d'apprentissage : Tutoriel vidéo CSS, Tutoriel vidéo HTML)

1. Qu'est-ce que float ?

Floating, comme son nom l'indique, signifie flotter. Fait référence au phénomène d'un élément se détachant du flux documentaire et flottant au-dessus de l'élément parent.

Attribut float de style CSS, utilisé pour définir la disposition flottante des objets d'étiquette (tels que :

boîte d'étiquette, étiquette, étiquette, étiquette et autres étiquettes html), float C'est-à-dire que l'objet label flotte vers la gauche (float:left) et l'objet label flotte vers la droite (float:right).

La direction horizontale de l'élément flotte, ce qui signifie que l'élément ne peut se déplacer que vers la gauche et la droite, mais pas vers le haut et vers le bas.

Un élément flottant essaiera de se déplacer vers la gauche ou la droite jusqu'à ce que son bord extérieur touche la bordure de la boîte conteneur ou d'une autre boîte flottante.

Les éléments après l'élément flottant l'entoureront.

Les éléments situés avant l'élément flottant ne seront pas affectés.

Si l'image flotte à droite, le flux de texte ci-dessous s'enroulera à gauche de celle-ci.

2. Comment générer du float ?

Ajoutez l'attribut float à l'élément lui-même

valeur float :

left	L'élément flotte vers la gauche.
droite	L'élément flotte vers la droite.
aucun	Valeur par défaut. L'élément n'est pas flottant et apparaît là où il apparaît dans le texte.
inherit	spécifie que la valeur de l'attribut float doit être héritée de l'élément parent.

3. Quelle est la fonction du flottement ?

Fonction : dans le flux du document HTML, il est divisé en éléments de ligne, éléments de bloc et éléments de bloc en ligne.

Les éléments de ligne et les éléments de bloc en ligne sont disposés horizontalement, tandis que les éléments de bloc sont disposés sous forme de flux de haut en bas. . Lorsque nous voulons disposer les éléments de bloc horizontalement, nous utilisons notre float.

Lors de l'ajout de float à un élément de niveau bloc, les éléments qui doivent être disposés verticalement commencent à être disposés horizontalement, comme le montre la figure ci-dessous :

.box {border: 1px solid #666;height: 700px;width: 700px;color: #fff;}
.box1 {float: left; width: 100px; height: 100px; background: #000;}
.box2 {float: left; width: 100px; height: 100px; background: red; }
.box3 {width: 200px; float: left; height: 200px; background: yellow; }
.box4 {width: 300px; float: left; height: 300px; background: blue; }
.box5 {float: left; width: 300px; height: 400px; background: green;}
<p class="box"> <p class="box1"> box1 </p> <p class="box2"> box2 </p> <p class="box3"> box3 </p> <p class="box4"> box4 </p> <p class="box5"> box5 </p> </p>

css+div float autres cas d'application

DIV CSS experience un

Css Pour le contenu de l'exemple de style, nous mettons le texte et les images dans un calque div à largeur fixe, avec le contenu du texte en fond bleu à droite et les petites images à gauche.

www.divcss5.com Le rendu final de la démonstration du cas CSS est le suivant

1 Tout d'abord, nous définissons un CSS le plus externe avec une largeur de 300px et une hauteur de 200px. Le code du sélecteur CSS nommé box est. comme suit (points de connaissance Que signifie px)

.box{width:300px; height:200px;}

2. Définissez le style CSS du contenu du texte dans la boîte sur yangshi, et définissez l'arrière-plan sur bleu, la largeur sur 120px et flottez à droite

.yangshi{ width:120px; float:right; background:#0066FF;}

3. . Définissez l'image à gauche et faites flotter le style div+css

img { float: left;}

4. La disposition div dans le corps, le code est le suivant

 <div class="box">
<div class="yangshi">我是www.divcss5.com 网站，测试内容</div>
<img  src="/static/imghw/default1.png"  data-src="demo.gif"  class="lazy"   / alt="Explication détaillée du CSS utilisant l'attribut float pour contrôler le div flottant à gauche et à droite" >
</div>

Instructions : La balise img ici est un lien vers une image externe et l'image. le nom est demo.gif

Capture d'écran du résultat final de la démonstration

Expérience CSS 2

Suivant Nous démontrons l'utilisation de div+css pour positionner la petite image ici à droite (l'exemple précédent était à gauche), et la zone de contenu du texte en arrière-plan bleu à gauche (l'exemple précédent était à droite) (centre CSS étendu). Ici, il suffit de changer le float:right; de yangshi en float:left et le style css de l'image img { float: left;} en img { float: right;}

Le code CSS est le suivant :

 .box{width:300px; height:200px;}
.yangshi{ width:120px; float:right; background:#0066FF;}
img{ float:left;}

code et contenu CSS en html Inchangé

La capture d'écran du résultat final de la démonstration est la suivante :

J'espère que les deux exemples CSS ci-dessus vous aideront à comprendre float. J'espère que vous pourrez tous l'essayer en pratique !

Résumé flottant CSS

Nous devons distinguer les styles gauche (text-align:left) et droit (text-align:right) du contenu du texte. Flottant définit uniquement le style flottant gauche et droit pour les balises html. Le style float n'a pas de style centré (flottant-centré). Si vous devez centrer l'objet étiquette, nous l'expliquerons en détail (marge css) dans le texte relatif au centrage de la mise en page css. N'oubliez pas ici d'utiliser float:right lorsque vous flottez vers la droite et float:left lorsque vous flottez vers la gauche.

(Partage vidéo d'apprentissage : tutoriel vidéo CSS, tutoriel vidéo HTML)

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!