CSS et BFC (Contexte de formatage de bloc)

Je ne savais pas ce qu'était BFC avant. Après l'avoir lu aujourd'hui, j'ai réalisé que j'y avais souvent été exposé auparavant, mais je ne connaissais pas le nom professionnel. Tout comme les fermetures et l'héritage, ils étaient souvent utilisés auparavant, mais je ne le savais tout simplement pas. Aujourd'hui, je vais parler du positionnement BFC du CSS.

BFC est lié à la suppression des flotteurs, parlons donc de la façon d'effacer les flotteurs. Il existe deux manières principales d'effacer les flotteurs :

①Utilisez l'attribut clear pour effacer les flotteurs

. ②Faire en sorte que le conteneur parent forme un BFC

Avant de parler de BCF, je tiens à dire qu'il existe trois schémas de positionnement principaux pour contrôler la disposition des éléments : Flux normal et flotteurs et positionnement absolu

. ***Flux normal

Dans un flux normal, les éléments sont disposés de haut en bas en fonction de leurs positions séquentielles dans HTML. Dans ce processus, les éléments en ligne sont disposés horizontalement jusqu'à ce que la ligne soit pleine, puis. les sauts de ligne et 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 positionnés par défaut dans le flux normal. On peut également dire que dans le flux normal, la position d'un élément est. déterminé par sa position dans le document HTML.

***Flotteurs

Dans une disposition 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 du flotteur.

***Positionnement absolu

Dans une mise en page 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 (lorsqu'il flotte les éléments affecteront les éléments frères), et la position spécifique de l'élément est déterminée par les coordonnées de positionnement absolu.

BFC appartient au flux ordinaire, il n'aura donc aucun impact sur les éléments frères.

&&--Définition de BFC--&&

Lors de la disposition des éléments de la boîte, BFC fournit un environnement dans lequel la disposition selon certaines règles n'affectera pas les autres environnements. Par exemple, les éléments flottants formeront un BFC. Les sous-éléments au sein de l'élément flottant sont principalement affectés par l'élément flottant, et les deux éléments flottants n'ont aucune influence l'un sur l'autre. En d'autres termes, si un élément remplit les conditions pour devenir un BFC, la disposition et le positionnement des éléments internes de l'élément ne s'influenceront pas (sauf si la boîte interne crée un nouveau BFC), et ce sera un conteneur indépendant isolé. .

&&--Qu'est-ce que BFC exactement--&&

En matière de mise en page visuelle, Block Formatting Context fournit un environnement dans lequel les éléments HTML sont disposés selon certaines règles. Les éléments d'un environnement n'affectent pas la disposition des autres environnements. Par exemple, les éléments flottants formeront un BFC. Les sous-éléments à l'intérieur de l'élément flottant sont principalement affectés par l'élément flottant, et les deux éléments flottants ne s'affectent pas. Cela ressemble quelque peu à l’idée selon laquelle un BFC est une unité administrative indépendante.

&&--Comment former BFC--&&

①La valeur de float n'est pas nulle.

②La valeur du débordement n'est pas visible.

③La valeur d'affichage est l'une des valeurs suivantes : table-cell, table-caption et inline-block.

④La valeur de la position n'est ni relative ni statique.

⑤boîtes flexibles en css3

&&--Le rôle de BFC--&&

①Contient des éléments flottants (flotteurs clairs)

BFC sera basé sur Éléments enfants Hauteur adaptative à la situation. Cette fonctionnalité consiste à utiliser les styles overflow:hidden/auto/scroll, float:left/right sur l'élément parent pour fermer le

② flottant non couvert par l'élément flottant <.> L'élément flottant sera ignoré L'existence d'éléments frères couvre les éléments frères. La création d'un BFC pour les éléments frères peut empêcher que cette situation ne se produise

&&--BFC a trois caractéristiques principales-&&

①BFC Empêchera les marges de s'effondrer

Les marges verticales de deux p connectés se chevaucheront. Dans le développement réel, nous n'aurons parfois pas besoin de ce type de pliage. Dans ce cas, nous pouvons utiliser l'une des fonctionnalités de BFC. - empêcher le chevauchement des marges. Empêche l'effondrement des marges des éléments parents et enfants. Uniquement lorsque deux éléments de niveau bloc sont adjacents et dans le même contexte de formatage de niveau bloc, les marges verticales entre eux se chevauchent. Autrement dit, même si deux éléments de niveau bloc sont adjacents, leurs marges ne s'effondreront pas s'ils ne se trouvent pas dans le même contexte de formatage de niveau bloc. Dans le même temps, l'élément BFC n'a pas de marges réduites avec ses éléments enfants.

②BFC peut contenir des éléments flottants

C'est exactement le principe d'utilisation des méthodes overflow:hidden et overflow:auto pour fermer le float ci-dessus. Utilisez overflow:hided ou overflow:auto pour déclencher la fonctionnalité BFC de. l'élément parent de l'élément flottant, afin que vous puissiez contenir des éléments flottants et fermer le float.

Le texte original du W3C est "Hauteurs 'Auto' pour les racines de contexte de formatage des blocs", c'est-à-dire que BFC s'adaptera automatiquement à la hauteur en fonction de la situation des éléments enfants, même si ses éléments enfants incluent des éléments flottants .

Mais IE6-7 ne prend pas en charge le BFC du W3C, mais utilise son propre hasLayout. En termes de performances, il est très similaire à BFC, sauf que hasLayout lui-même présente de nombreux problèmes, conduisant à une série de bugs dans IE6-7. Les conditions de déclenchement de hasLayout sont quelque peu similaires à celles du déclenchement de BFC. Kayo écrira un article pour présenter la situation spécifique. Ici, Kayo recommande de définir la propriété CSS spécifique à IE zoom : 1 pour déclencher hasLayout. Le zoom est utilisé pour définir ou récupérer le taux de zoom de l'élément. Une valeur de "1" signifie utiliser la taille réelle de l'élément. peut déclencher hasLayout sans que cela ait d'autres effets sur les éléments, ce qui est relativement plus pratique.

③BFC peut empêcher les éléments d'être recouverts par des éléments flottants
Comme mentionné ci-dessus, les éléments frères et sœurs des éléments flottants ignoreront la position des éléments flottants et tenteront d'occuper toute la ligne, de sorte qu'ils soient couvert par des éléments flottants, le déclenchement de BFC pour cet élément frère peut empêcher que cela se produise.

Pour plus d'articles sur CSS BFC (Block Formatting Context), veuillez faire attention au site Web PHP chinois !