Quelle est la méthode de flottant CSS ?-tutoriel CSS-php.cn

En CSS, vous pouvez utiliser l'attribut float et définir le style "float:left" ou "float:right" pour faire flotter les éléments. Une fois qu'un élément flotte, il pourra être placé côte à côte, et la largeur et la hauteur pourront être définies, qu'il s'agisse à l'origine d'un élément de niveau bloc ou d'un élément en ligne.

Quelle est la méthode de flottant CSS ?

L'environnement d'exploitation de ce tutoriel : système Windows 7, version CSS3&&HTML5, ordinateur Dell G3.

Le but initial du float flottant est d'obtenir un effet d'habillage du texte

Syntaxe flottante : float:left/right;

utilisez float:left ou float: right ou les deux sont flotteurs qui seront générés.

Propriétés du flottant

Floating est l'attribut le plus couramment utilisé pour la mise en page en CSS.

Il y a maintenant deux divs, avec respectivement la largeur et la hauteur définies. Nous savons que leurs effets sont les suivants :

À ce stade, si vous ajoutez un attribut flottant à ces deux divs, tel que float: left;, l'effet est le suivant :

Cela permet d'obtenir l'effet flottant. À ce stade, les deux éléments sont côte à côte et les deux éléments peuvent définir la largeur et la hauteur (cela ne peut pas être réalisé dans le flux standard du paragraphe précédent).

Si vous voulez bien apprendre à flotter, vous devez connaître trois propriétés. Parlons-en ensuite.

Propriété 1 : Les éléments flottants sont hors normes.

Hors norme signifie débit hors norme. Regardons quelques exemples.

Preuve 1 :

Dans l'image ci-dessus, par défaut, les deux balises div sont disposées l'une au-dessus de l'autre. Maintenant, en raison de l'attribut float, la première balise <div> dans l'image ci-dessus semble flotter, cette balise est donc disposée à un autre niveau. Le deuxième <div> est également aménagé selon le débit standard sur son propre niveau.

Preuve 2 :

Dans l'image ci-dessus, la balise span ne peut pas être définie en largeur et en hauteur dans le flux standard (car il s'agit d'un élément en ligne ). Cependant, une fois qu'il est défini sur flottant, la largeur et la hauteur peuvent être définies même sans le convertir en élément de niveau bloc.

Cela peut donc prouver une chose : Une fois qu'un élément flotte, il pourra être côte à côte, et la largeur et la hauteur pourront être définies. Peu importe qu’il s’agisse d’un div ou d’un span. Toutes les balises, après avoir été flottantes, ne font plus la distinction entre les niveaux en ligne et en bloc.

Propriété 2 : Les éléments flottants sont proches les uns des autres

Regardons un exemple pour comprendre.

Après avoir défini l'attribut float: left; pour chacun des trois div, nous définissons ensuite la largeur et la hauteur. Lorsque vous modifiez la taille de la fenêtre du navigateur, vous pouvez voir l'effet d'accrochage du div :

L'image ci-dessus montre que s'il y a suffisamment d'espace pour le n°3, il sera proche du n°2. S’il n’y a pas assez de place, il s’appuiera sur le grand frère n°1.
S'il n'y a pas assez d'espace pour s'appuyer contre Big Brother n°1, le n°3 peut se coller tout seul au mur de gauche.

Mais quand le n°3 va le coller au mur, faites attention :

La photo ci-dessus montre que lorsque le n°3 colle à gauche mur, il n'ira pas au 1 Il y a du monde à l'intérieur.

De même, float a également une valeur d'attribut right, qui est symétrique à la valeur d'attribut left.

Propriété 3 : Les éléments flottants ont un effet "circonférence des mots"

Vous la comprendrez si vous regardez une image. Nous laissons div flotter et p pas flotter.

Dans l'image ci-dessus, nous avons constaté que : div bloque p, mais ne bloque pas le texte dans p, formant un effet "encerclement de mots" .

Résumé : Le texte du flux standard ne sera pas masqué par les boîtes flottantes. (Les mots sont comme l'eau)

Concernant le flottement, nous devons souligner une chose pour éviter toute confusion, nous devons suivre un principe dès le début : Ce n'est jamais une chose qui flotte seule, flotter est tout. . Flottant ensemble, flottant, tout le monde flottant.

Propriété 4 : Réduire

Réduire : Un élément flottant, si la largeur n'est pas définie, sera automatiquement réduit à la largeur du contenu (c'est très similaire aux éléments en ligne).

Par exemple :

Dans l'image ci-dessus, le div lui-même est un élément de niveau bloc. Si la largeur n'est pas définie, il occupera la totalité. row seul ; cependant, paramètre Une fois le div flottant, il rétrécira

Supplément flottant (faites attention lors de la création d'un site Web)

Comme le montre l'image ci-dessus, réglez para1 et para2 sur flottant, ce sont les fils de div. À ce stade, la largeur de para1+para2 est inférieure à la largeur de div. L'effet est montré dans l'image ci-dessus. Mais si la largeur de para1+para2 est définie pour être supérieure à la largeur de div, nous constaterons que para2 tombe :

(Partage de vidéos d'apprentissage : css tutoriel vidéo)

Attribuer une tâche

Attribuer une tâche pour obtenir l'effet suivant :

Pour obtenir l'effet ci-dessus , le code est le suivant :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.header{
width: 970px;
height: 103px;
/*居中。这个语句的意思是：居中：*/
margin: 0 auto;
}
.header .logo{
float: left;
width: 277px;
height: 103px;
background-color: red;
}
.header .language{
float: right;
width: 137px;
height: 49px;
background-color: green;
margin-bottom: 8px;
}
.header .nav{
float: right;
width: 679px;
height: 46px;
background-color: green;
}

.content{
width: 970px;
height: 435px;
/*居中，这个语句今天没讲，你照抄，就是居中：*/
margin: 0 auto;
margin-top: 10px;
}
.content .banner{
float: left;
width: 310px;
height: 435px;
background-color: gold;
margin-right: 10px;
}
.content .rightPart{
float: left;
width: 650px;
height: 435px;
}
.content .rightPart .main{
width: 650px;
height: 400px;
margin-bottom: 10px;
}
.content .rightPart .links{
width: 650px;
height: 25px;
background-color: blue;
}
.content .rightPart .main .news{
float: left;
width: 450px;
height: 400px;
}
.content .rightPart .main .hotpic{
float: left;
width: 190px;
height: 400px;
background-color: purple;
margin-left: 10px;
}
.content .rightPart .main .news .news1{
width: 450px;
height: 240px;
background-color: skyblue;
margin-bottom: 10px;
}
.content .rightPart .main .news .news2{
width: 450px;
height: 110px;
background-color: skyblue;
margin-bottom: 10px;
}
.content .rightPart .main .news .news3{
width: 450px;
height: 30px;
background-color: skyblue;
}
.footer{
width: 970px;
height: 35px;
background-color: pink;
/*没学，就是居中：*/
margin: 0 auto;
margin-top: 10px;
}
</style>
</head>
<body>
<!-- 头部 -->
<div>
<div>logo</div>
<div>语言选择</div>
<div>导航条</div>
</div>

<!-- 主要内容 -->
<div>
<div>大广告</div>
<div>
<div>
<div>
<div></div>
<div></div>
<div></div>
</div>
<div></div>
</div>
<div></div>
</div>
</div>

<!-- 页尾 -->
<div></div>
</body>
</html>

Copier après la connexion

En fait, la mise en page de cette page est celle du site Web suivant :

Floating clear

Le clair mentionné ici Flottant fait référence à la compensation de l'impact entre les flotteurs et les flotteurs.

Avant-propos

Grâce à l'exemple ci-dessus, nous avons constaté que les pages Web de cet exemple sont disposées côte à côte par flottement.

Par exemple, une page Web comporte trois parties : l'en-tête, le contenu et le pied de page. Prenons l'exemple de la partie contenu. Si vous définissez le fils du contenu sur flottant, mais que ce fils est un tout nouveau flux standard, le fils du fils est toujours dans le flux standard.

Dès le premier jour d'apprentissage du flottement, il faut comprendre que lorsque le flottement commence, il faut le dégager. Faisons d'abord une expérience.

Dans l'exemple suivant, il y a deux divs d'éléments au niveau du bloc. Les divs n'ont aucun attribut et chaque div a un li. L'effet est le suivant :

Ce qui précède L'exemple est simple. Mais si nous ajoutons float à la balise <li> à l'intérieur. L'effet est le suivant :

Le code est le suivant :

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{

}
li{
float: left;
width: 100px;
height: 20px;
background-color: pink;


}
</style>
</head>
<body>
<div>
<ul>
<li>生命壹号1</li>
<li>生命壹号2</li>
<li>生命壹号3</li>
<li>生命壹号4</li>
</ul>
</div>
<div>
<ul>
<li>许嵩1</li>
<li>许嵩2</li>
<li>许嵩3</li>
<li>许嵩4</li>
</ul>
</div>
</body>
</html>

Copier après la connexion

L'effet est le suivant :

Dans l'image ci-dessus , on trouve : Le premier li du deuxième groupe est attaché au dernier li du premier groupe (on pensait au départ que ces li seraient divisés en deux lignes).

Cela nous amène à ce dont nous allons parler : la première façon de nettoyer les flotteurs.
Alors comment le résoudre ?

Méthode 1 : ajouter de la hauteur à l'élément ancêtre de l'élément flottant

La cause première de ce phénomène dans la préface est : le div parent de li ne définit pas la hauteur , ce qui donne ces deux La hauteur de chaque div est de 0px (nous pouvons la vérifier via l'élément d'inspection de la page Web). La hauteur du div est nulle, il ne peut donc pas prendre en charge un conteneur pour ses propres enfants flottants.

Il ne peut pas supporter un conteneur, ce qui empêche ses enfants de flotter correctement à l'intérieur.

D'accord, maintenant même si vous réglez la hauteur de ce div, si la hauteur du div est inférieure à la taille de l'enfant, des phénomènes anormaux se produiront :

Définissez une hauteur correcte et appropriée pour le div (assurez-vous au moins que la hauteur est supérieure à la taille du fils), et vous pourrez voir le phénomène correct :

Résumé :

Si un élément doit flotter, ses éléments ancêtres doivent avoir une hauteur.

Une boîte avec une hauteur peut fermer le flottant. (Souvenez-vous de cette phrase de personnes qui l'ont vécu)

Tant qu'il flotte dans une boîte avec une hauteur, alors ce flotteur n'affectera pas les éléments flottés suivants. Il s’agit donc d’atténuer l’impact du flottement.

Méthode 2 : clear:both;

Dans la production de pages Web, la hauteur apparaît rarement. Pourquoi? Parce qu’il peut être boosté par le contenu ! Autrement dit, la méthode 1 que nous venons d’expliquer est rarement utilisée dans le travail.

Alors, pouvez-vous dégager le flotteur sans écrire en hauteur ? Laisser également les flotteurs ne pas s'influencer les uns les autres ?

À ce stade, nous pouvons utiliser l'attribut clear:both;. Comme suit :