> Faqs > ¿Cómo afecta el float al contenido del bloque al cual se aplica?

¿Cómo afecta el float al contenido del bloque al cual se aplica?

Soy un programador web de nivel básico y quería saber si podrían ayudarme a comprender la siguiente duda:

En la clase .articulo me veo obligado a usar float:left en lugar de definir un heigth ya que no todos los navegadores procesan de igual forma el heigth, provocando que las imagenes salgan de los <articles>. Al usar float el contenido de los articles se acomoda automaticamente dentro y expande el tamaño del article. ¿Por qué sucede eso? Gracias de antemano.

Este es mi HTML:

<section id="cuerpo">
		<article class="articulo">
			<img src="../images/laptopToshibaA.png" alt="" align="left">
			<h3>Chrome Book</h3>
			Disfrute la libertad de almacenamiento en la nube con la comodidad de las actualizaciones automáticas.<br>El Chromebook 2 de Toshiba de 13,3" (33,8 cm) trae estilo y seguridad a su trabajo y el juego, por un precio cómodo.
		</article>	
		<article class="articulo">
			<img src="../images/laptopToshibaA.png" alt="" align="left">
			<h3>Ultra Portable</h3>
			Este producto tiene un peso ligero y fuerte en el diseño.<br>Diseñado para aquellos que exigen lo mejor de la informática móvil.
		</article>
		<article class="articulo">
			<img src="../images/laptopToshibaA.png" alt="" align="left">
			<h3>Qosmio</h3>
			Equipo de entretenimiento en alta definición que supera sus expectativas.<br>Para los entusiastas multimedia y jugadores ávidos, la gama Qosmio proporciona toda la potencia de juego que necesita.
		</article>
		<article class="articulo">
			<img src="../images/laptopToshibaA.png" alt="" align="left">
			<h3>All In One PC</h3>
			Este equipo es un inteligente centro de entretenimiento.<br>Usted obtiene lo mejor de la televisión de Toshiba y el PC calidad a su alcance, todo en uno inteligente y unidad de bella factura.
		</article>

Ahora el CSS

#cuerpo{
	float: left;
	width: 75px;
	
}
.articulo{
	width: 95%;
	float: left;
	background: #E4DBDB;
	border: 1px solid;
	font-size: 20px;
	text-align: justify;
	padding: 10px;
}
.articulo img{
	width: 30%;
	padding: 6px;
}

Respuestas

El float de CSS trae consigo una serie de problemas históricos, que afortunadamente hemos ido superando con CSS Flexbox y CSS Grid.

El height también es un atributo conflictivo, porque lo general es que los elementos crezcan tanto como se necesite y muchas veces ese atributo no funciona como se esperaría.

Lo que no dices en tu pregunta es qué efecto quieres conseguir, por lo que no sé muy bien cómo direccionar la respuesta de manera que te resulte útil, más allá que investigues esos otros estándares de CSS para ver si puedes aplicarlos y solucionar tus problemas.

Sobre cómo afecta al float al contenido, decir que es un atributo que permite que el contenido se lleve a un lado u otro, derecha o izquierda, de modo que el contenido que viene a continuación se acople alrededor del elemento flotante. Es lo típico que se hace con imágenes donde el texto que hay a continuación rodea la imagen.

Sin embargo, el float no hace que los contenedores crezcan para ocupar todo el contenido flotante. Es decir, si tenemos un contendor con fondo de color y dentro tiene una imagen que flota a cualquier lado, y solo hay esta imagen, veremos que el contenedor no llega a abarcar toda la imagen, sino que se queda simplemente en la parte de arriba. Este es un efecto que generalmente es poco deseable.

Para contrarestarlo históricamente se viene haciendo uso del hack "clearfix", que consiste en colocar un elemento extra debajo del elemento flotante con un clear: both;

<section>
    <img src="1.jpg">
    <div class="clearfix">
</section>
img {
    float: right;
}
.clearfix {
    clear: both;
}

Otra técnica se trata de usar el overflow, como se puede ver en este artículo de solución al float.

Pero insisto, estas técnicas son un poco antiguas, pues ya no se suele usar float para maquetación CSS, ya que existe Flexbox y Grid Layout que mejoran mucho los comportamientos de los elementos y la facilidad de maquetación.

Miguel Angel
3295 146 215 17