CSS에서 플로트가 부모에 미치는 영향

이제 테두리가 있는 div 안에 이미지가 있다고 가정해 보겠습니다. div에는 테두리를 지정하고, 이미지에는 아직 float 속성을 지정하지 않겠습니다.

브라우저에서 어떻게 표시되는지 살펴보겠습니다:

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

cssdiv {
  border: 1px solid red;
}

Результат:

이제 이미지에 float 속성을 left 값으로 설정해 보겠습니다. 이 경우 놀라운 일이 발생합니다. 부모 요소의 높이가 사라지고, 하단 테두리가 상단 테두리 바로 아래에서 시작되며, 이미지가 부모 요소 아래로 빠져나옵니다:

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

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

Результат:

즉, float 속성이 지정된 요소는 부모 요소의 높이를 늘리지 않습니다.

이제 float 속성 값을 left 대신 right로 설정해 보겠습니다. 부모 요소의 동작은 변하지 않지만, 이미지는 오른쪽에 뜨게 됩니다:

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

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

Результат: