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>
Si inspecciono me doy cuenta de que la sección termina en este punto:
Que es justo donde empieza mi div.
¿Alguna idea de por qué ocurre esto?