Maison > Article > interface Web > Explication détaillée du principe CSS BFC et de son application

Explication détaillée du principe CSS BFC et de son application

小云云original: 2018-02-03 09:48:401809parcourir

Cet article vous présente principalement les informations pertinentes pour comprendre le principe BFC et son application en 10 minutes. L'éditeur le trouve plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur et jetons un œil. J'espère que cela pourra aider tout le monde.

1. Solutions de positionnement courantes

Avant de parler de BFC, examinons d'abord les solutions de positionnement courantes. Les solutions de positionnement sont la disposition des éléments de contrôle :

Flux normal

Dans le flux normal, les éléments sont disposés de haut en bas en fonction de leur position dans HTML. Dans ce processus, les éléments en ligne sont disposés horizontalement jusqu'à ce que la ligne soit pleine, puis la ligne. Les sauts de ligne. Les éléments au niveau du bloc seront rendus sous la forme d'une nouvelle ligne complète. Sauf indication contraire, tous les éléments sont par défaut positionnés dans un flux normal. On peut également dire que la position d'un élément dans un flux normal est déterminée par la position du flux. élément dans le document HTML.

Float (float)

Dans une mise en page flottante, les éléments apparaissent d'abord en fonction de la position du flux normal, puis sont décalés vers la gauche ou la droite autant que possible selon la direction de flottant. L'effet est le même que celui de l'impression et la composition du texte est similaire.

Positionnement absolu

Dans une disposition en position absolue, l'élément sera séparé du flux normal dans son ensemble, de sorte que l'élément en position absolue n'affectera pas ses éléments frères, et la position spécifique de l'élément est déterminé par le positionnement absolu est déterminé par les coordonnées.

2. Concept BFC

Le contexte de formatage est un concept de la spécification CSS2.1 du W3C. Il s'agit d'une zone de rendu sur la page et possède un ensemble de règles de rendu qui déterminent la façon dont ses sous-éléments seront positionnés, ainsi que leur relation et leur interaction avec d'autres éléments.

Alors, qu’est-ce que BFC ?

BFC est un contexte de formatage de bloc (contexte de formatage au niveau du bloc), qui appartient au flux ordinaire du schéma de positionnement ci-dessus.

Les éléments avec les caractéristiques BFC peuvent être considérés comme des conteneurs indépendants isolés. Les éléments à l'intérieur du conteneur n'affecteront pas la disposition des éléments extérieurs, et BFC a certaines caractéristiques que les conteneurs ordinaires n'ont pas.

En termes simples, BFC peut être compris comme une grande boîte fermée. Peu importe à quel point les éléments à l'intérieur de la boîte passent, ils n'affecteront pas l'extérieur.

3. Déclencher BFC

Tant que l'élément remplit l'une des conditions suivantes, la fonctionnalité BFC peut être déclenchée :

élément racine du corps
Éléments flottants : float Valeurs autres que aucune
Éléments positionnés de manière absolue : position (absolue, fixe)
affichage pour les blocs en ligne, les cellules de tableau, flex
valeurs de débordement autres que visibles (caché, auto, défilement)

4. Fonctionnalités et applications du BFC

1. Les marges s'effondreront sous le même BFC

<head>
p{
    width: 100px;
    height: 100px;
    background: lightblue;
    margin: 100px;
}
</head>
<body>
    <p></p>
    <p></p>
</body>

Du point de vue de l'effet de vue, car les deux éléments p sont sous le même conteneur BFC (fait ici référence à l'élément body), la marge inférieure du premier p et la marge supérieure du deuxième p se chevauchent, donc la distance entre les deux boîtes n'est que de 100 px, pas 200px.

Tout d'abord, ce n'est pas un bug CSS. Nous pouvons le comprendre comme une spécification. Si vous souhaitez éviter le chevauchement des marges, vous pouvez les placer dans différents conteneurs BFC.

<p class="container">
    <p></p>
</p>
<p class="container">
    <p></p>
</p>

.container {
    overflow: hidden;
}
p {
    width: 100px;
    height: 100px;
    background: lightblue;
    margin: 100px;
}

A ce moment, les marges des deux cases deviennent 200px

2. BFC peut contenir des éléments flottants (désactivé Flottant)

Nous savons tous que les éléments flottants se détacheront du flux de documents ordinaire. Jetons un coup d'œil à l'exemple suivant

<p style="border: 1px solid #000;">
    <p style="width: 100px;height: 100px;background: #eee;float: left;"></p>
</p>

En raison de la. éléments flottants dans le conteneur, hors du flux de documents, le conteneur n'a donc qu'une hauteur de marge de 2 pixels. Si le BFC du conteneur est déclenché, le conteneur encapsulera l'élément flottant.

<p style="border: 1px solid #000;overflow: hidden">
    <p style="width: 100px;height: 100px;background: #eee;float: left;"></p>
</p>

L'effet est le suivant :

3. BFC peut empêcher les éléments d'être recouverts par des éléments flottants

Allons-y. premier regard sur un habillage de texte Effet :

<p style="height: 100px;width: 100px;float: left;background: lightblue">我是一个左浮动的元素</p>
<p style="width: 200px; height: 200px;background: #eee">我是一个没有设置浮动, 
也没有触发 BFC 元素, width: 200px; height:200px; background: #eee;</p>

À ce stade, le deuxième élément est en fait partiellement couvert par l'élément flottant (mais les informations textuelles ne seront pas couvertes par l'élément flottant). Si vous voulez éviter L'élément est couvert, et la fonctionnalité BFC du deuxième élément peut être touchée. Ajoutez overflow: caché au deuxième élément, et il deviendra :

Cette méthode peut être utilisée. L'implémentation d'une mise en page adaptative à deux colonnes fonctionne bien. À l'heure actuelle, la largeur à gauche est fixe et le contenu à droite a une largeur adaptative (en supprimant la largeur du contenu). contenu à droite ci-dessus).

Recommandations associées :

Analyse des exemples d'utilisation de BFC et IFC en CSS

Explication détaillée de l'important BFC dans CSS

À propos du BFC et de l'effondrement en hauteur

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!

css html Float auto 外边距 display position overflow table bug

Déclaration：

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

Article précédent：À propos des pièges rencontrés par le bloc en ligne CSS3Article suivant：À propos des pièges rencontrés par le bloc en ligne CSS3

Articles Liés

Voir plus