tag:www.domestika.org,2005:/es/forums/5-programacion-cliente/topics/83594-css-solucion-a-contenedor-que-pierde-el-height-al-flotar-el-contenidoCSS: Solución a contenedor que pierde el height al flotar el contenido, en el foro Programación Cliente - Domestika2015-08-08T17:28:40+02:00tag:www.domestika.org,2005:Post/7479262015-08-08T17:28:40+02:002015-08-08T17:28:40+02:00CSS: Solución a contenedor que pierde el height al flotar el contenido<p>hola,
<br>Muy útil el post, gracias!</p>jonitjuegotag:www.domestika.org,2005:Post/6376402010-07-28T16:52:24+02:002013-11-28T18:16:35+01:00CSS: Solución a contenedor que pierde el height al flotar el contenido<p>Yo también soy partidario de utilizar el overflow!</p>davidoliverastag:www.domestika.org,2005:Post/6354812010-07-02T13:04:47+02:002015-08-13T05:47:17+02:00CSS: Solución a contenedor que pierde el height al flotar el contenido<p>Yo sigo en mis 13 y la class clearfix es la mas escalable, sencilla de aplicar, y limpia a nivel de css.
<br>Muchos bugs de IE vienen dados por sobreflotar elementos, aplicar demasiados overlfows y cosas de este tipo.</p>
<p>Usando esta clase te aseguro que te ahorras dolores de cabezas con paddings( aplicando el width 100%), con overfloats ( raros en IE al flotar anidadmente demasiados elementos), y el overflow visible que comentar psycho no lo he probado nunca, pero estas declarando cosas que por defecto ya se aplican a los elementos.</p>
<p>Por el tema del :after y que meta un punto, eso no es indexable ya que no pertenece al contenido de HTML, es presentación como buen CSS que es.</p>
<p>A todo esto esta clase se aplica directamente a un elemento, no asignando esas propiedades a otras clases, que eso si es sucio, por ejemplo:</p>
<p>&lt;ul class="nav clearfix"&gt;
<br>...
<br>&lt;/ul&gt;</p>
<p>Pero bueno como bien dice psycho cada maestro con su librillo.
</p>Ismael Gonzáleztag:www.domestika.org,2005:Post/6353952010-07-01T21:13:35+02:002014-09-17T12:34:02+02:00CSS: Solución a contenedor que pierde el height al flotar el contenido<p>+1 a la solución de e-lena es la que suelo usar yo también. No me gusta usar los :after ...</p>markshocktag:www.domestika.org,2005:Post/6351922010-06-30T13:37:19+02:002010-06-30T13:37:19+02:00CSS: Solución a contenedor que pierde el height al flotar el contenido<p>Cada maestrillo con su librillo, a mi me ha gustado lo que ha dicho e-lena, porque si el contenedor está flotado no hace falta declarar el overflow.
<br>Isma, con overflow:visible también funciona casi siempre.</p>psychotag:www.domestika.org,2005:Post/6351442010-06-30T09:35:30+02:002018-01-14T20:50:31+01:00CSS: Solución a contenedor que pierde el height al flotar el contenido<p>De hecho creo que es peor a nivel de semántica ser intrusivo con el contenido, y meter elementos que no hacen falta como el punto ¿no?</p>e-lenatag:www.domestika.org,2005:Post/6350132010-06-29T11:10:26+02:002020-12-28T14:19:43+01:00CSS: Solución a contenedor que pierde el height al flotar el contenido<p>¿Clearfix de verdad te parece una buena solución?</p>
<p>¿Meter con el :after un . al final del todo? A mi me parece una solución muy muy sucia y anticuada.</p>tag:www.domestika.org,2005:Post/6349372010-06-28T16:35:47+02:002015-08-13T05:47:17+02:00CSS: Solución a contenedor que pierde el height al flotar el contenido<p>La mejor opcion es acostumbrarse a usar cleafix, no tienes por que flotar un elemento que no necesita ser flotado por maquetación, y el overflow hidden, es un poco eventual, por que si necesitas que algo sobresalga de ese contenedor no te vale</p>Ismael Gonzáleztag:www.domestika.org,2005:Post/6348772010-06-28T07:23:17+02:002020-12-28T14:19:43+01:00CSS: Solución a contenedor que pierde el height al flotar el contenido<p>Overflow:hidden es mano de santo. Se ajusta a su contenido y listo.</p>tag:www.domestika.org,2005:Post/6346892010-06-25T16:20:22+02:002010-06-25T16:20:22+02:00CSS: Solución a contenedor que pierde el height al flotar el contenido<p>Me apunto eso</p>psychotag:www.domestika.org,2005:Post/6343832010-06-23T18:31:24+02:002010-06-23T18:31:24+02:00CSS: Solución a contenedor que pierde el height al flotar el contenido<p>Otra forma es darle un width: 100% y flotar el elemento padre, con eso consigues que recupere su altura.
<br>Si no interesa darle el ancho 100% siempre se puede dar al siguiente elemento la propiedad de clear.</p>
<p>Aunque está bien eso de conocer distintas técnicas :)</p>e-lenatag:www.domestika.org,2005:Post/6343802010-06-23T18:22:56+02:002015-08-13T05:47:17+02:00CSS: Solución a contenedor que pierde el height al flotar el contenido<p>Yo uso una clase CSS:</p>
<p>/* CLearfix */</p>
<p>.clearfix:after {content:".";display:block; height:0;clear:both;visibility:hidden;}</p>
<p>.clearfix { display:inline-block; }</p>
<p>/* Hide from IE Mac \*/</p>
<p>.clearfix { display:block; }</p>
<p>* html .clearfix { height:1px; }</p>
<p>/* End hide from IE Mac */
</p>Ismael González