CSS에서 블록의 float 속성

float 속성은 이미지뿐만 아니라 다른 모든 블록에도 적용할 수 있습니다.

한번 확인해 보겠습니다.

parent 클래스를 가진 부모 블록이 있고, 그 안에 텍스트와 child 클래스를 가진 자식 블록이 있다고 가정해 보겠습니다. 두 블록 모두 테두리가 지정되어 있으며, 자식 블록에는 너비와 높이도 지정되어 있습니다:

html<div class="parent">
  <div class="child"></div>
  some long text
</div>

css.parent {
  border: 1px solid red;
  text-align: justify;
}
.child {
  width: 200px;
  height: 100px;
  border: 1px solid green;
}

Результат:

이제 자식 블록에 float를 left 값으로 설정해 보겠습니다. 그러면 텍스트가 블록 주위를 감싸기 시작할 것입니다:

html<div class="parent">
  <div class="child"></div>
  some long text
</div>

css.parent {
  border: 1px solid red;
  text-align: justify;
}
.child {
  float: left;
  width: 200px;
  height: 100px;
  border: 1px solid green;
}

Результат: