css-quiz-floats.md

👋🏼 Welcome 👋🏼

Instagram | Twitter | LinkedIn

Choose your language 👅

• English
• Spanish

English version 🚀

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;
}

Spanish version 🚀

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;
}