Instagram | Twitter | LinkedIn
Without enough text the container
element does not respect the height needed for the floated element. How we can fix this problem ?
Click here to see the correct answer and explanation 👀
Correct Answer | Explanation |
---|---|
A | One of the methods is to use the overflow property, with a value other than the default of visible . The reason overflow works in this way is that using any value other than the initial value of visible creates a Block Formatting Context, and one of the features of a BFC is that it contains floats. |
Explanation based on 👉🏼 Understanding CSS Layout And The Block Formatting Context | Smashing Magazine
Recommended reading 👉🏼 Block Formatting Context
Code:
HTML:
<div class="container">
<div class="float">Soy un flotante 🛸</div>
Soy un texto afuerita
</div>
CSS:
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap');
body {
font-family: 'Open Sans', sans-serif;
font-size: 12px;
}
.container {
border: 4px solid #B5EBFA;
padding: 8px;
}
.float {
border: 4px solid #8C52FF;
background-color: #CAB2FF;
color: #8C52FF;
float: left;
margin-right: 10px;
padding: 8px;
}
Sin suficiente texto, el elemento container
no respeta la altura necesaria para el elemento flotante. ¿Cómo podemos solucionar este problema?
Haz click aquí para ver la respuesta correcta y su explicación 👀
Respuesta correcta | Explicación |
---|---|
A | Uno de los métodos consiste en utilizar la propiedad overflow , con un valor distinto al predeterminado visible . La razón por la que la propiedad overflow funciona de esta manera es que el uso de cualquier valor que no sea el valor inicial visible crea un Contexto de formato de bloque, y una de las características de un BFC es que contiene flotantes. |
Explicación basada en 👉🏼 Understanding CSS Layout And The Block Formatting Context | Smashing Magazine
Lectura recomendada 👉🏼 Contexto de formato de bloque | MDN
Código completo:
HTML:
<div class="container">
<div class="float">Soy un flotante 🛸</div>
Soy un texto afuerita
</div>
CSS:
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap');
body {
font-family: 'Open Sans', sans-serif;
font-size: 12px;
}
.container {
border: 4px solid #B5EBFA;
padding: 8px;
}
.float {
border: 4px solid #8C52FF;
background-color: #CAB2FF;
color: #8C52FF;
float: left;
margin-right: 10px;
padding: 8px;
}