1. Qu'est-ce que float
Quand le <a href="http://www.php.cn/wiki/%20de%20l'%C3%A9l%C3%A9ment%20919.html" target="_blank">float<code><a href="http://www.php.cn/wiki/919.html" target="_blank">float</a> Lorsque l'attribut n'est pas none, float est généré.
<p class="float">float</p>
Copier après la connexion
.float {
float: left;
width: 100px;
height: 100px;
background-color: #ddd;
}Copier après la connexion
2. L'impact du flottement
Le flottement entraînera la rupture des éléments du flux de documents, notamment comme suit :
-
L'élément parent est fortement réduit, c'est-à-dire qu'il ne contiendra pas d'éléments flottants.
Par exemple, le code ci-dessus apparaîtra comme
L'élément parent est fortement réduit
-
habillage du texte .
Effet d'habillage du texte
Vous pouvez remarquer que la largeur de l'élément .normal couvre ici le .float, mais il n'y a pas de texte sous l'élément .float, ce qui signifie que le texte est "expulsé" car même s'il se détache du flux de documents, il ne se détache pas du flux de texte. Cet effet est également l'intention originale de l'attribut float. Le code est le suivant :
<p class="float">float</p>
正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素
Copier après la connexion
body {
background-color: #ccc;
}
.float {
float: left;
width: 100px;
height: 100px;
background-color: #ddd;
}
.normal {
background-color: #fff;
}Copier après la connexion
Les marges des éléments flottants ne seront pas fusionnées.
Pour du contenu connexe sur la fusion des marges, vous pouvez cliquer ici. Une fois que l'élément
flotte, il deviendra un élément de bloc en ligne, c'est-à-dire <a href="http://www.php.cn/wiki/927%20.html" target="_blank">display<code><a href="http://www.php.cn/wiki/927.html" target="_blank">display</a>: inline-block : bloc en ligne.
3. Application flottante
Habillage de texte mentionné ci-dessus.
-
Écrivez une mise en page à trois colonnes avec une largeur fixe à gauche et à droite et un milieu adaptatif.
<body>
<p class="left float">left</p>
<p class="right float">right</p>
<p class="mid">自适应宽度元素自适应宽度元素自适应宽度元素自适应宽度元素自适应宽度元素自适应宽度元素自适应宽度元素自适应宽度元素自适应宽度元素</p>
</body>
Copier après la connexion
body {
background-color: #ccc;
}
.float {
float: left;
width: 100px;
height: 100px;
background-color: #ddd;
}
.left {
float: left;
}
.right {
float: right;
}
.mid {
height: 100px;
background-color: #fff;
margin: 200px; /*故意加上了上下 margin 值*/
}Copier après la connexion
Ici, j'ai délibérément ajouté la valeur margin, et vous pouvez voir l'effet :
trois colonnes Le la disposition
body tombe également avec le .mid de margin Cela peut s'expliquer par la fusion des marges introduite plus tôt.
ps : Lorsque j'ai écrit pour la première fois cette mise en page à trois colonnes, le code HTML était écrit comme ceci
<body>
<p class="left float">left</p>
<p class="mid">自适应宽度元素自适应宽度元素自适应宽度元素自适应宽度元素自适应宽度元素自适应宽度元素自适应宽度元素自适应宽度元素自适应宽度元素</p>
<p class="right float">right</p>
</body>
Copier après la connexion
Comme ci-dessus, écrivez l'élément adaptatif du milieu au milieu. plus cohérent. Logique, mais si écrit comme ceci, cela ne fonctionnera pas. L'élément de droite tombera, car l'élément .mid est un élément de niveau bloc et ne remplira pas toute la ligne. tomber car il est à l'origine hors du flux de documents d'éléments flottants. .left
Effacer le flottant
Effacer les éléments enfants
Ici, j'écris uniquement des méthodes qui ne produisent pas de balises dénuées de sens.
BFC (Block
For
matting Context), c'est-à-dire un formatage au niveau du bloc contexte, son explication officielle Oui : éléments
flottants,
absolument positionnés (<a href="http://www.php.cn/wiki/902.%20html" target=" _blank">position</a><a href="http://www.php.cn/code/6074.html" target="_blank"></a> est ou <a href="http://www.php.cn/wiki/902.html" target="_blank">position</a>), élément de bloc en ligneabsolute, fixedtabledisplay:inline-blockcellule, titre du tableau et <a href="http://www.php.cn/wiki/923.html" target="_blank">overflow<code>display:table-cell Éléments dont la valeur d'attribut n'est pas display:table-caption (sauf que la valeur est propagée à la fenêtre<a href="http://www.php.cn/css/css-rwd-viewport.html" target="_blank">viewport<code><a href="http://www.php.cn/wiki/923.html" target="_blank">overflow</a> ) créera un nouveau contexte de formatage au niveau du bloc. visible<a href="http://www.php.cn/css/css-rwd-viewport.html" target="_blank">viewport</a>
En résumé, il doit remplir l'une des conditions suivantes :
- Non
floatnone
- n'est pas
<a href="http://www.php.cn/wiki/188.html" target="_blank">statique<p></p></a> ou position<a href="http://www.php.cn/wiki/188.html" target="_blank">static</a>
display est pour table-cell, table-caption, inline-block, flex, inline-flex
overflow n'est pas pour visible
Tant que vous ajoutez l'un des attributs ci-dessus à l'élément parent pour remplir les conditions, c'est-à-dire que l'ajout de BFC à l'élément parent peut effacer le flottement du élément enfant.
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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
