Définition du flotteur et dégagement du flotteur (BFC)-tutoriel CSS-php.cn

Définition du flotteur et dégagement du flotteur (BFC)

零下一度

Libérer： 2017-05-10 11:57:30

original

1656 Les gens l'ont consulté

Float

1. Qu'est-ce que float

Float se produit lorsque l'attribut <a href="http://www.php.cn/wiki/919.html" target="_blank">float</a> de l'élément n'est pas none.

<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 .

Définition du flotteur et dégagement du flotteur (BFC)

Effet d'habillage du texte

Vous pouvez remarquer que la largeur de l'élément .normal couvre le .float élément, 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 :

float

正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素

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 .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>
 left
 right
 自适应宽度元素自适应宽度元素自适应宽度元素自适应宽度元素自适应宽度元素自适应宽度元素自适应宽度元素自适应宽度元素自适应宽度元素
</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>
 left
 自适应宽度元素自适应宽度元素自适应宽度元素自适应宽度元素自适应宽度元素自适应宽度元素自适应宽度元素自适应宽度元素自适应宽度元素
 right
</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.

S'il y a un élément frère derrière l'élément flottant, vous pouvez ajouter l'attribut
à son élément frère. clearSi du texte entoure cette partie du code, ajoutez
ou .normal à clear:left. L'utilisation spécifique de clear:both ne sera pas développée ici. clear
Ajoutez une pseudo-classe ou un pseudo-élément à l'élément à supprimer du flottement.
```
.float::after {
  content: &#39;&#39;;
  display: block;
  visiability: hidden;
  height: 0;
  clear: both;
}
```
Copier après la connexion
Pour plus d'informations sur l'utilisation de ::after, veuillez consulter la documentation MDN.
est effacé sur l'élément parent, c'est-à-dire BFC
BFC (Block Formatting Context), qui est le contexte de formatage au niveau du bloc. Son explication officielle est :

éléments flottants positionnés de manière absolue (
est position ou absolute), élément de bloc en ligne fixed, cellule de tableau display:inline-block, titre du tableau display:table-cell et display:table-caption la valeur de l'attribut n'est pas L'élément overflow (sauf lorsque la valeur est propagée à la fenêtre visible) créera un nouveau contexte de formatage au niveau du bloc. viewport

En résumé, il doit remplir l'une des conditions suivantes :
1. Non floatnone
2. n'est pas position ou staticrelative
3. est display, table-cell, table-caption, inline-block, flexinline-flex
4. Pas overflowvisible
Tant que vous ajoutez l'un des attributs ci-dessus à l'élément parent pour remplir les conditions, cela c'est-à-dire, ajoutez-le à l'élément parent. Accédez à BFC pour effacer le flotteur des éléments enfants.
【Recommandations associées】
1.
Tutoriel vidéo CSS en ligne gratuit
2
Manuel CSS en ligne
3.
php.cn Dugu Jiujian (2) - tutoriel vidéo CSS
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!