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

Table des matières

Float

1. Qu'est-ce que float

2. L'impact du flottement

3. Application flottante

Maison

interface Web

tutoriel CSS

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

零下一度

May 10, 2017 am 11:57 AM

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!

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

Générez AI Hentai gratuitement.

Afficher plus

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)

3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Meilleurs paramètres graphiques

3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Solution d'énigmes de coquille

2 Il y a quelques semaines By DDD

R.E.P.O. Comment réparer l'audio si vous n'entendez personne

3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

WWE 2K25: Comment déverrouiller tout dans Myrise

4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Afficher plus

Outils chauds

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Afficher plus

Sujets chauds

Où se trouve l'entrée de connexion pour la messagerie Gmail ?

7489

Tutoriel CakePHP

1377

Quel est le format du nom de compte de Steam

Clé d&amp;amp;amp;amp;amp;amp;#39;activation Win11 permanent

NYT Connexions Indices et réponses

Afficher plus

Related knowledge

Comment effacer l'historique des images récentes de l'arrière-plan du bureau dans Windows 11 Apr 14, 2023 pm 01:37 PM

Windows 11 améliore la personnalisation du système, permettant aux utilisateurs d'afficher un historique récent des modifications précédemment apportées à l'arrière-plan du bureau. Lorsque vous entrez dans la section de personnalisation de l'application Paramètres système Windows, vous pouvez voir diverses options, la modification du fond d'écran en fait partie. Mais vous pouvez maintenant voir le dernier historique des fonds d’écran définis sur votre système. Si vous n'aimez pas voir cela et souhaitez effacer ou supprimer cet historique récent, continuez à lire cet article, qui vous aidera à en savoir plus sur la façon de le faire à l'aide de l'Éditeur du Registre. <h2>Comment utiliser la modification du registre

Comment effacer l'historique de protection dans Windows 11 : 2 méthodes Apr 23, 2023 am 08:04 AM

Lorsque votre PC manque d'espace de stockage, vous pouvez afficher instantanément de nombreux dossiers pour libérer de l'espace. Celui qui consomme beaucoup est l’historique de protection de Windows Defender, mais pouvez-vous l’effacer dans Windows 11 ? Bien que cela ne soit pas entièrement nécessaire, la suppression de l’historique de protection peut en réalité aider à libérer de l’espace de stockage sur votre système. Pour certains utilisateurs, ces fichiers occupent 20 à 25 Go d'espace, ce qui peut être intimidant si votre ordinateur manque d'espace de stockage. Voyons donc ce qu'est l'historique de protection, toutes les façons de l'effacer dans Windows 11 et comment le configurer pour qu'il s'efface automatiquement après un délai défini. Qu’est-ce que la préservation historique ? M.

iOS 17 : Comment changer le style d'horloge de l'iPhone en mode veille Sep 10, 2023 pm 09:21 PM

La veille est un mode d'écran de verrouillage qui s'active lorsque l'iPhone est branché sur le chargeur et orienté en orientation horizontale (ou paysage). Il se compose de trois écrans différents, dont l'un affiche l'heure en plein écran. Lisez la suite pour savoir comment changer le style de votre horloge. Le troisième écran de StandBy affiche les heures et les dates dans différents thèmes que vous pouvez faire glisser verticalement. Certains thèmes affichent également des informations supplémentaires, comme la température ou la prochaine alarme. Si vous maintenez une horloge enfoncée, vous pouvez basculer entre différents thèmes, notamment numérique, analogique, mondial, solaire et flottant. Float affiche l'heure dans de grands nombres de bulles dans des couleurs personnalisables, Solar a une police plus standard avec un motif d'éruption solaire dans différentes couleurs et World affiche le monde en mettant en surbrillance

Comment supprimer complètement les virus des téléphones mobiles Méthodes recommandées pour lutter contre les virus sur les téléphones mobiles Feb 29, 2024 am 10:52 AM

Une fois qu'un téléphone mobile est infecté par un certain virus cheval de Troie, il ne peut pas être détecté et tué par un logiciel antivirus. Ce principe est similaire à celui d'un ordinateur infecté par un virus tenace. Le virus ne peut être complètement supprimé qu'en formatant le lecteur C et en le supprimant. réinstaller le système, puis j'expliquerai comment nettoyer complètement le virus une fois que le téléphone mobile est infecté par un virus tenace. Méthode 1 : ouvrez le téléphone et cliquez sur « Paramètres » - Autres paramètres - « Restaurer le téléphone » pour restaurer les paramètres d'usine du téléphone. Remarque : Avant de restaurer les paramètres d'usine, vous devez sauvegarder les données importantes du téléphone. Les paramètres d'usine sont équivalents. à celles de l'ordinateur. "C'est la même chose que le formatage et la réinstallation du système." Après la récupération, les données du téléphone seront effacées. Méthode 2 (1) Éteignez d'abord le téléphone, puis appuyez et maintenez le "bouton d'alimentation". " + "bouton volume + ou bouton volume -" sur le téléphone en même temps.

Quelle est la définition d'une courte vidéo ? Dec 23, 2020 pm 02:56 PM

La définition de la vidéo courte fait référence au contenu vidéo poussé à haute fréquence qui est diffusé sur diverses nouvelles plates-formes médiatiques, adapté au visionnage en déplacement et dans un état de loisir à court terme, et qui est généralement diffusé sur les nouveaux médias Internet en 5 minutes. ; le contenu combine partage de compétences, humour, tendances de la mode, points chauds sociaux, interviews de rue, éducation du public, créativité publicitaire, personnalisation commerciale et autres thèmes. Les courtes vidéos présentent les caractéristiques d’un processus de production simple, d’un faible seuil de production et d’une forte participation.

Qu'est-ce que Discuz ? Définition et introduction aux fonctions de Discuz Mar 03, 2024 am 10:33 AM

"Explorer Discuz : définition, fonctions et exemples de code" Avec le développement rapide d'Internet, les forums communautaires sont devenus une plate-forme importante permettant aux gens d'obtenir des informations et d'échanger des opinions. Parmi les nombreux systèmes de forum communautaire, Discuz, en tant que logiciel de forum open source bien connu en Chine, est favorisé par la majorité des développeurs et administrateurs de sites Web. Alors, qu’est-ce que Discuz ? Quelles fonctions a-t-il et comment peut-il aider notre site Web ? Cet article présentera Discuz en détail et joindra des exemples de code spécifiques pour aider les lecteurs à en savoir plus.

HTML, CSS et jQuery : Créez un bouton avec un effet flottant Oct 24, 2023 pm 12:09 PM

HTML, CSS et jQuery : Créer un bouton avec un effet flottant nécessite des exemples de code spécifiques Introduction : De nos jours, la conception Web est devenue une forme d'art En utilisant des technologies telles que HTML, CSS et JavaScript, nous sommes en mesure d'ajouter divers aspects à la page. . De tels effets spéciaux et effets interactifs. Cet article présentera brièvement comment utiliser HTML, CSS et jQuery pour créer un bouton avec un effet flottant et fournira des exemples de code spécifiques. 1. Structure HTML Tout d'abord, nous devons

La définition et la fonction de la clé primaire composite MySQL Mar 15, 2024 pm 05:18 PM

La clé primaire composite dans MySQL fait référence à la clé primaire composée de plusieurs champs dans la table, qui est utilisée pour identifier de manière unique chaque enregistrement. Contrairement à une clé primaire unique, une clé primaire composite est formée en combinant les valeurs de plusieurs champs. Lors de la création d'une table, vous pouvez définir une clé primaire composite en spécifiant plusieurs champs comme clés primaires. Afin de démontrer la définition et la fonction des clés primaires composites, nous créons d'abord une table nommée utilisateurs, qui contient trois champs : id, nom d'utilisateur et email, où id est une clé primaire et un utilisateur auto-incrémentés.

See all articles