Foros del Web » Creando para Internet » HTML »

donde colocar elemento para limpiar float??

Estas en el tema de donde colocar elemento para limpiar float?? en el foro de HTML en Foros del Web. 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"> ...
  #1 (permalink)  
Antiguo 26/12/2012, 16:11
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 11 años, 2 meses
Puntos: 1011
donde colocar elemento para limpiar float??

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
__________________
if(ViolenciaDeGénero) {alert('MUJER ASESINADA');}
  #2 (permalink)  
Antiguo 26/12/2012, 17:48
Avatar de David
Moderador
 
Fecha de Ingreso: abril-2005
Ubicación: In this planet
Mensajes: 15.712
Antigüedad: 14 años, 4 meses
Puntos: 836
Respuesta: donde colocar elemento para limpiar float??

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.
__________________
Por favor, antes de preguntar, revisa la Guía para realizar preguntas.
  #3 (permalink)  
Antiguo 27/12/2012, 08:09
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 11 años, 2 meses
Puntos: 1011
Respuesta: donde colocar elemento para limpiar float??

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
__________________
if(ViolenciaDeGénero) {alert('MUJER ASESINADA');}
  #4 (permalink)  
Antiguo 27/12/2012, 08:57
 
Fecha de Ingreso: octubre-2012
Ubicación: Madrid
Mensajes: 16
Antigüedad: 6 años, 11 meses
Puntos: 2
Respuesta: donde colocar elemento para limpiar float??

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
  1. .clearfix:after {
  2.     content: ".";
  3.     display: block;
  4.     clear: both;
  5.     visibility: hidden;
  6.     line-height: 0;
  7.     height: 0;
  8. }
  9.  
  10. .clearfix {
  11.     display: inline-block;
  12. }
  13.  
  14. html[xmlns] .clearfix {
  15.     display: block;
  16. }
  17.  
  18. * html .clearfix {
  19.     height: 1%;
  20. }

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

;)
  #5 (permalink)  
Antiguo 28/12/2012, 06:18
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 11 años, 2 meses
Puntos: 1011
Respuesta: donde colocar elemento para limpiar float??

gracias por hack. aunque te dejo uno mas moderno
Cita:
.clearfix:before, .clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
__________________
if(ViolenciaDeGénero) {alert('MUJER ASESINADA');}

Etiquetas: css, elemento, input, limpiar, formulario
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 04:13.