1

tengo un problema de superposición con HTML y CSS básicos. El problema es que tengo una sección definida, y después de esta declaro div, pero se superpone a la sección (en las imágenes se ve más claramente). Os dejo el código junto a imágenes descriptivas.

/** LISTA PRECIOS **/
ul.lista-precios > li { /* Solo el primer li */
  padding: 1rem;
}
@media(min-width:768px){
  ul.lista-precios{
    float: left;
    width: 33.3%;
  }
}
div.tabla-precio {
  border: 1px solid #e1e1e1;
  background-color: #fff;
  padding: 4rem 0;
  text-align: center;
  transition: all .3s ease;
}
div.tabla-precio:hover{
  transform: scale(1.1);
  border: 1px solid #fe4918;
  box-shadow: 0px 0px 50px #666;
}
div.tabla-precio ul li {
  font-family: 'PT Sans', sans-serif;
  font-size: 1.4rem;
  margin-bottom: 2rem;
  text-transform: uppercase;
  color: #868686;
  line-height: 2.6rem;
}
div.tabla-precio ul li i {
  color: green;
}
div.tabla-precio h3 {
  font-family: 'Oswald', sans-serif;
  font-size: 1.6rem;
  text-transform: uppercase;
}
div.tabla-precio p.numero {
  color: #000;
  margin-top: 1.5rem;
  font-size: 5em;
}

/** MAPA **/
div.mapa {
  height: 10rem;
  background-color: green;
}
<section class="precios seccion">
  <h2>Precios</h2>
  <div class="contenedor">
    <ul class="lista-precios clearfix">
      <li>
        <div class="tabla-precio">
          <h3>Pase por día</h3>
          <p class="numero">$30</p>
          <ul>
            <li><i class="fas fa-check"></i> Bocadillos gratis</li>
            <li><i class="fas fa-check"></i> Todas las conferencias</li>
            <li><i class="fas fa-check"></i> Todos los talleres</li>
          </ul>
          <a href="#" class="button hollow">Comprar</a>
        </div>
      </li>
    </ul> <!-- .lista-precios -->
  </div> <!-- .contenedor -->
</section>

<div id="mapa" class="mapa">

</div>

Lo que se ve es lo siguiente: introducir la descripción de la imagen aquí

Si inspecciono me doy cuenta de que la sección termina en este punto: introducir la descripción de la imagen aquí Que es justo donde empieza mi div. ¿Alguna idea de por qué ocurre esto?

3
  • 1
    eso pasa porque usas float, al usarlo los elementos flotando salen del flujo y se superponen a los otros. Lo que podrias hacer es usar flexbox en vez de floats, es mucho mejor. el 6 jul. 2021 a las 12:42
  • prueba a cambiar float: left; por display: flex; y obtendras el mismo resultado pero con la franja verde al pie. Hay un buen tutorial de flexbox en el canal de YT de Jonmircha el 6 jul. 2021 a las 12:50
  • @HernánGarcia, podrías publicar un respuesta aportando como resolverías el problema a través de flex.
    – phpMyGuel
    el 6 jul. 2021 a las 12:52

2 respuestas 2

1

Al usar float, siempre tenes que poner al ultimo del contenedor que contiene esos flotantes un div llamado clear, a clear le asignas desde el css clear: both;

clear La propiedad CSS clear especifica si un elemento puede estar al lado de elementos flotantes que lo preceden o si debe ser movido (cleared) debajo de ellos. La propiedad clear aplica a ambos elementos flotantes y no flotantes.

both Es un keyword que indica que el elemento es movido hacia abajo para limpiar tanto elementos flotantes de la izquierda como de la derecha.

entonces quedaría así tu código:

/** LISTA PRECIOS **/
        ul.lista-precios > li { /* Solo el primer li */
          padding: 1rem;
        }
        @media(min-width:768px){
          ul.lista-precios{
            float: left;
            width: 33.3%;
          }
        }
        div.tabla-precio {
          border: 1px solid #e1e1e1;
          background-color: #fff;
          padding: 4rem 0;
          text-align: center;
          transition: all .3s ease;
        }
        div.tabla-precio:hover{
          transform: scale(1.1);
          border: 1px solid #fe4918;
          box-shadow: 0px 0px 50px #666;
        }
        div.tabla-precio ul li {
          font-family: 'PT Sans', sans-serif;
          font-size: 1.4rem;
          margin-bottom: 2rem;
          text-transform: uppercase;
          color: #868686;
          line-height: 2.6rem;
        }
        div.tabla-precio ul li i {
          color: green;
        }
        div.tabla-precio h3 {
          font-family: 'Oswald', sans-serif;
          font-size: 1.6rem;
          text-transform: uppercase;
        }
        div.tabla-precio p.numero {
          color: #000;
          margin-top: 1.5rem;
          font-size: 5em;
        }

        /** MAPA **/
        div.mapa {
          height: 10rem;
          background-color: green;
        }
        .clear {
          clear: both;
        }
<section class="precios seccion">
        <h2>Precios</h2>
        <div class="contenedor">
          <ul class="lista-precios clearfix">
            <li>
              <div class="tabla-precio">
                <h3>Pase por día</h3>
                <p class="numero">$30</p>
                <ul>
                  <li><i class="fas fa-check"></i> Bocadillos gratis</li>
                  <li><i class="fas fa-check"></i> Todas las conferencias</li>
                  <li><i class="fas fa-check"></i> Todos los talleres</li>
                </ul>
                <a href="#" class="button hollow">Comprar</a>
              </div>
            </li>
          </ul> <!-- .lista-precios -->
        </div> <!-- .contenedor -->
      </section>
      <div class="clear"></div>
      <div id="mapa" class="mapa">
      
      </div>

Espero ayudarte con esto, cualquier cosa me comentas, Suerte!

2
  • Hola, gracias a todos por vuestras respuestas. Por lo que veo el problema esta en usar float en vez de los display que nos da CSS. Hare los cambios y comentare por aqui los resultados, pero entonces me surge una pregunta: ¿es mejor usar flexbox/grid antes que float? En caso de que dependa de la situación, en qué situaciones es idóneo cada uno. Gracias.
    – lRetro
    el 6 jul. 2021 a las 14:32
  • En mi caso me resulta mas fácil y rápido usar Flexbox, ya que puedo lograr mas rápido lo que quiero maquetar sin estar asignándole valores extras como padding, margin, etc, pero tampoco es malo usar float, nada mas que es la manera antigua que se usaba float al maquetar, por eso llego la salvación de flexbox que logras resultados mas óptimos y mas rápido y con poco línea de códigos!
    – Roy
    el 6 jul. 2021 a las 14:38
0

Recuerda que CSS son estilos en cascada, por lo que los estilos de algunos elementos pueden afectar a otros, generalmente al usar float recomiendo usar clear:boat; en el div padre, esto para evitar que los elementos flotantes afecten a otros, por ejemplo:

/** LISTA PRECIOS **/
        ul.lista-precios > li { /* Solo el primer li */
          padding: 1rem;
        }
        @media(min-width:768px){
          ul.lista-precios{
            float: left;
            width: 33.3%;
          }
        }
        div.tabla-precio {
          border: 1px solid #e1e1e1;
          background-color: #fff;
          padding: 4rem 0;
          text-align: center;
          transition: all .3s ease;
        }
        div.tabla-precio:hover{
          transform: scale(1.1);
          border: 1px solid #fe4918;
          box-shadow: 0px 0px 50px #666;
        }
        div.tabla-precio ul li {
          font-family: 'PT Sans', sans-serif;
          font-size: 1.4rem;
          margin-bottom: 2rem;
          text-transform: uppercase;
          color: #868686;
          line-height: 2.6rem;
        }
        div.tabla-precio ul li i {
          color: green;
        }
        div.tabla-precio h3 {
          font-family: 'Oswald', sans-serif;
          font-size: 1.6rem;
          text-transform: uppercase;
        }
        div.tabla-precio p.numero {
          color: #000;
          margin-top: 1.5rem;
          font-size: 5em;
        }

        /** MAPA **/
        div.mapa {
          height: 10rem;
          background-color: green;
        }
        .mapa {
          clear: both;
        }
<section class="precios seccion">
        <h2>Precios</h2>
        <div class="contenedor">
          <ul class="lista-precios clearfix">
            <li>
              <div class="tabla-precio">
                <h3>Pase por día</h3>
                <p class="numero">$30</p>
                <ul>
                  <li><i class="fas fa-check"></i> Bocadillos gratis</li>
                  <li><i class="fas fa-check"></i> Todas las conferencias</li>
                  <li><i class="fas fa-check"></i> Todos los talleres</li>
                </ul>
                <a href="#" class="button hollow">Comprar</a>
              </div>
            </li>
          </ul> <!-- .lista-precios -->
        </div> <!-- .contenedor -->
      </section>
      <div class="clear"></div>
      <div id="mapa" class="mapa">
      
      </div>

Sin embargo hay otras formas de alinear elementos en columnar, mi recomendación es usar un div padre con la propiedad flex, dentro puedes agregar divs hijos con la propiedad inline-block, estos se alinearan sin afectar a otros elementos usando flexbox, aquí un ejemplo:

.padre {
  width: 100%;
  display: flex; /* Usamos flexbox en nuestro div padre */
}

.hijo {
  width: 33.33%; /* Agregamos un tamaño*/
  display: inline-block; /* Usamos inline-block en los divs hijos*/
}

.contenedor-hijo {
  border: solid 1px #ccc;
  width: 90%;
  margin: auto;
  padding: 20px 20px;
  box-sizing: border-box;
  text-align: center;
}
<div class="padre">

  <div class="hijo">
    <div class="contenedor-hijo">
      <h2>Titulo</h2>
    </div>
  </div>
  
  <div class="hijo">
    <div class="contenedor-hijo">
      <h2>Titulo</h2>
    </div>
  </div>
  
  <div class="hijo">
    <div class="contenedor-hijo">
      <h2>Titulo</h2>
    </div>
  </div>

</div>

1
  • Efectivamente era por el uso de float y no hacer el clear. Pasare eso a flexbox al ser más versátil. Gracias por el apoyo. Un saludo
    – lRetro
    el 7 jul. 2021 a las 7:14

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.