float속성에 대하여

float을 그대로 번역하면 '뛰우다'라는 뜻입니다. css에서 정렬하기 위해 사용됩니다.
예를 들어, 문서와 사진이 있을 때 사진의 위치를 좌측 또는 우측으로 정렬을 할 수 있습니다.

절대 위치 요소는 float 속성을 무시합니다.

		float 속성 값

none - 뛰우지 않음
left - 왼쪽으로 뛰움
right - 오른쪽으로 뛰움
initial - 기본값으로 설정
inherit - 부모 요소로부터 상속됨

overflow에 대하여

overflow는 내용이 요소의 크기를 벗어났을 때 어떻게 처리할지를 정하는 속성입니다. 내용이 주어진 공간에 다 들어가지 않을 때, 보여주게 할 수도,안 보이게 할 수도 있습니다.

float과 overflow가 만나면 특이한 결과가 나옵니다.

<div class="pic"></div>
<div class="move">Elit quis non laborum tempor ea aliqua nostrud veniam ad adipisicing. Ea ut nisi nulla sit. Sit consequat consectetur et quis nisi deserunt irure nostrud. Magna nostrud duis ad exercitation ad ullamco veniam. Laboris sunt nostrud ad commodo dolore exercitation. Et eiusmod aliqua eu reprehenderit amet dolore est aliquip occaecat. Eiusmod nulla deserunt et id anim eu ullamco eiusmod exercitation irure.
Reprehenderit consectetur velit Lorem nostrud incididunt nisi occaecat exercitation mollit. Sit non elit mollit est id enim qui. Labore in tempor irure do pariatur consequat et dolor exercitation dolore quis proident. Id dolore fugiat labore magna dolore id culpa proident ex tempor. Cupidatat minim veniam pariatur duis ipsum tempor.</div>

<style>
  .pic {
    width: 100px;
    height: 100px;
    background-color: red;
    float: right;
    overflow: hidden;
  }
</style>

overflow:hidden을 넣었을 때

<div class="pic"></div>
<div class="move">Elit quis non laborum tempor ea aliqua nostrud veniam ad adipisicing. Ea ut nisi nulla sit. Sit consequat consectetur et quis nisi deserunt irure nostrud. Magna nostrud duis ad exercitation ad ullamco veniam. Laboris sunt nostrud ad commodo dolore exercitation. Et eiusmod aliqua eu reprehenderit amet dolore est aliquip occaecat. Eiusmod nulla deserunt et id anim eu ullamco eiusmod exercitation irure.
Reprehenderit consectetur velit Lorem nostrud incididunt nisi occaecat exercitation mollit. Sit non elit mollit est id enim qui. Labore in tempor irure do pariatur consequat et dolor exercitation dolore quis proident. Id dolore fugiat labore magna dolore id culpa proident ex tempor. Cupidatat minim veniam pariatur duis ipsum tempor.</div>

<style>
  .pic {
    width: 100px;
    height: 100px;
    background-color: red;
    float: right;
    overflow: hidden;
  }
  .move {
    overflow: hidden;
  }
</style>