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:

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

cssdiv {
  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:

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

cssdiv {
  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:

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

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

Результат: