Działanie floatów na rodzica w CSS

Załóżmy teraz, że mamy div, w którym znajduje się obrazek. Divowi ustawimy obramowanie, a obrazkowi na razie nie będziemy ustawiać właściwości float.

Spójrzmy, jak to będzie wyglądać w przeglądarce:

<div>
	<img src="img.png" alt="">
</div>

div {
	border: 1px solid red;
}

Teraz ustawmy obrazkowi właściwość float z wartością left. W tym przypadku stanie się coś zdumiewającego - wysokość rodzica zniknie, jego dolna granica będzie zaczynać się zaraz po górnej, a obrazek wystanie na dół poza swojego rodzica:

<div>
	<img src="img.png" alt="">
</div>

div {
	border: 1px solid red;
}
img {
	float: left;
}

Okazuje się, że elementy, którym ustawiono właściwość float, nie rozszerzają swojego rodzica na wysokość.

Zmieńmy wartość właściwości float z left na right. Zachowanie rodzica się nie zmieni, ale obrazek zacznie pływać po prawej stronie:

<div>
	<img src="img.png" alt="">
</div>

div {
	border: 1px solid red;
}
img {
	float: right;
}