Maison >interface Web >tutoriel CSS >En CSS, overflow: Hidden crée-t-il un nouveau contexte de formatage au niveau du bloc ?
En CSS, overflow: Hidden crée-t-il un nouveau contexte de formatage au niveau du bloc ?
- WBOYavant
- 2023-09-10 18:57:02937parcourir
Un contexte de formatage de bloc (BFC) est la partie de la mise en page Web en CSS où les éléments sont positionnés et interagissent les uns avec les autres. En bref, c'est comme un conteneur qui définit un ensemble de règles sur la façon dont les éléments doivent se comporter à l'intérieur du conteneur.
Dans cet article, nous verrons « Est-ce que overflow:hidden crée un nouveau contexte de formatage de bloc (BFC) en CSS
?La réponse est oui, car en CSS, l'attribut overflow:hidden peut créer un nouveau contexte de formatage au niveau du bloc (BFC). Lorsque la valeur de débordement d'un élément HTML n'est pas visible (valeur par défaut), cela déclenche la création d'un nouveau BFC. BFC empêche les marges de s'effondrer, aide à maintenir un positionnement correct, empêche les chevauchements accidentels et aide les lecteurs à percevoir le contraste entre deux éléments différents.
Maintenant, regardons l'exemple suivant pour comprendre l'impact du débordement : caché lors de la création de BFC −
La traduction chinoise deExemple
est :Exemple
Dans l'exemple ci-dessous, nous stylisons le « conteneur » sans utiliser la propriété CSS overflow:hidden.
<!DOCTYPE html>
<html>
<head>
<style>
.container {
height: 70px;
width: 300px;
border: 2px solid;
background-color: lightsalmon;
}
</style>
</head>
<body>
<h1 style="color: seagreen;">Tutorialspoint</h1>
<div class="container">
<p>
Tutorialspoint.com is a dedicated website to
provide quality online education in the domains
of Computer Science, Information Technology,
Programming Languages, and Other Engineering
as well as Management subjects.
</p>
</div>
</body>
</html>
Nous pouvons voir sur le résultat que le texte à l'intérieur du conteneur dépasse la limite. Par conséquent, il peut s’étendre à l’extérieur du conteneur et chevaucher d’autres éléments de la page Web, brisant ainsi la mise en page.
La traduction chinoise deExemple
est :Exemple
Dans l'exemple ci-dessous, nous utilisons la propriété CSS Overflow:hidden pour styliser le "conteneur" -
<!DOCTYPE html>
<html>
<head>
<style>
.container {
height: 70px;
width: 300px;
border: 2px solid;
overflow: hidden;
background-color: lightsalmon;
}
</style>
</head>
<body>
<h1 style="color: seagreen;">Tutorialspoint</h1>
<div class="container">
<p>
Tutorialspoint.com is a dedicated website to
provide quality online education in the domains
of Computer Science, Information Technology,
Programming Languages, and Other Engineering
as well as Management subjects.
</p>
</div>
</body>
</html>
En ajoutant l'attribut overflow:hidden au conteneur, un nouveau BFC est créé. Par conséquent, si le texte dépasse la hauteur du conteneur, il sera tronqué et masqué. Mais le texte débordé restera dans le conteneur.
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!