En este artículo, veremos «¿ El desbordamiento: oculto crea un nuevo contexto de formato de bloque (BFC)?».
La respuesta es sí , la propiedad de desbordamiento con valor cualquier cosa menos visible (porque es el valor predeterminado) creará un nuevo contexto de formato de bloque. Y como sabemos, el contexto de formato de bloque evita que los bordes colapsen, evita que el contenido se desvíe y ayuda a los lectores a percibir el contraste entre dos elementos diferentes. Esto puede ser útil para alinear un elemento de bloque junto a un elemento flotante.
Ejemplo 1: el siguiente ejemplo de código muestra cómo se alinea un elemento de bloque junto a un elemento flotante sin overflow:hidden .
HTML
<!DOCTYPE html>
<html>
<head>
<style>
.container {
border: 4px solid black;
width: 600px;
}
.box {
float: left;
font-size: 24px;
height: 100px;
width: 200px;
color: white;
background: green;
text-align: center;
padding: 20px;
}
.container p {
font-size: 20px;
}
</style>
</head>
<body>
<h1 style="color:green">
GeeksforGeeks
</h1>
<h3>Alignment without overflow:hidden</h3>
<div class="container">
<span class="box">
GeeksforGeeks
</span>
<p>
A Computer Science Portal For Geeks.
</p>
</div>
</body>
</html>
Producción:
Ejemplo 2: el siguiente ejemplo de código muestra cómo se alinea un elemento de bloque junto a un elemento flotante sin overflow:hidden.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
.container {
border: 4px solid black;
width: 600px;
overflow: hidden;
}
.box {
float: left;
font-size: 24px;
height: 100px;
width: 200px;
color: white;
background: green;
text-align: center;
padding: 20px;
}
.container p {
font-size: 20px;
}
</style>
</head>
<body>
<h1 style="color:green">
GeeksforGeeks
</h1>
<h3>Alignment with overflow:hidden</h3>
<div class="container">
<span class="box">
GeeksforGeeks
</span>
<p>
A Computer Science Portal For Geeks.
</p>
</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por chiragchouhan163 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA