donde colocar elemento para limpiar float??

IsaBelM · #1 (**permalink**) 26/12/2012, 17:11

primero os muestro el código

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
* {
margin: 0; 
padding: 0;
border: none;
position: relative;
}


html, body {
width: 100%;
height: 100%;
}


#contenido {
display: block;
width: 100%;
height: 200%;
}


div.base-enun {
width: 100%;
height: 35px;
}


div#cont-enun {
width: 100%;
height: 35px;
position: fixed;
top: 0;
left: 0;
background-color: rgba(109, 106, 107, 0.85);
}


div#cont-enun span {
float:left;
}


div#cont-enun span.enun {
font: bold 13px Tahoma, Geneva, sans-serif;
color: #FFF;
padding: 0 15px 0 10px;
top: 6px;
}


div#cont-enun form {
float: right;
right: 2%;
}


div#cont-enun form input {outline: 0;}
</style>
</head>
<body>

<div class="base-enun"></div>

<div id="contenido"></div>

<div id="cont-enun">
<span class="enun">un texto</span>
<form>
<input type="button" value="suprimir" />
</form>
</div>

<span style="clear: both"></span>

</body>
</html>

la maquetación no puede ser variada a excepción de

Código:

<span style="clear: both"></span>

una vez dicho esto paso a detallar un poco el css. #con-enun es un elemento fijado, con top y left 0. sus elementos hijos (.enun y form) están flotados.

la pregunta es; donde coloco el span para limpiar los float?? las dos opciones que tengo son

en la posición que muestro en el código
entre .base-enun y #contenido

David · #2 (**permalink**) 26/12/2012, 18:48

Como #con-enum tiene posición absoluta, sale del flujo normal del documento, por lo que por lo general no necesitarás "limpiar" el float. Si cuentas qué problema te produce ese elemento flotante quizás pueda dar mejor respuesta.

Una nota aparte, para tener en cuenta, clear se aplica a elementos en bloque, span es un elemento en línea.

IsaBelM · #3 (**permalink**) 27/12/2012, 09:09

no me genera ningún problema pero entiendo que es lo más correcto.
ahora me he dado cuenta que solamente he de limpiar la flotación derecha puesto que la izquierda no afecta al resto, pues está contenida en #cont-enun

en cuanto a usar un elemento en línea no lo sabía, gracias. el problema es que al usar un elemento de bloque, me crea un salto de línea entre el bloque flotado a la derecha y la izquierda

como no genera ningún problema, no limpiaré nada

gracias por tu tiempo

gallarR · #4 (**permalink**) 27/12/2012, 09:57

Hola compañero,

Lo mejor para limpiar un float no es eso ya que un elemento vacio daña la accesibilidad del sitio. La mejor manera, incluso más sencilla que esa es usar el "clearfix"

El código es el siguiente :

Código CSS:

Ver original.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}
 
.clearfix {
    display: inline-block;
}
 
html[xmlns] .clearfix {
    display: block;
}
 
* html .clearfix {
    height: 1%;
}

Con eso en tu archivo css, solo tienes que añadirle class="clearfix" al almento al que quieres limpiar los float

;)

IsaBelM · #5 (**permalink**) 28/12/2012, 07:18

gracias por hack. aunque te dejo uno mas moderno

Cita:

.clearfix:before, .clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}