Float

• float은 이미지 주변에 텍스트를 감싸기 위해 만들어진 프로퍼티.

1. float란?

CSS에서 positioning 을 하는 속성이며, 페이지 전체의 레이아웃을 잡을 때에도 정말 중요한 도구이다.

2. float의 사용

float 속성은 이전에 레이아웃을 잡는데 정말 많이 사용되던 속성입니다. 하지만 요즘에는 flex 속성을 기반으로 하여 레이아웃을 잡는 경우가 훨씬 많기 때문에 float은 자주 사용 되지 않는다.

3. float의 속성

1. inline, inline-block, block 요소가 모두 block 요소로 변하게 된다 !

2. 단, 영역을 차지하지 못하는 block 요소가 된다.

   • 자신이 가진 content의 width만큼 width를 가진다.
   • 자동(auto)로 생기는 margin 대신 다음 요소가 배치된다.

3. 부모 요소의 height는 0의 값을 가진다.

4. float의 값

1. left
요소가 자신의 포함(containing)한 블록의 좌측 배치된다.

2. right
요소가 자신의 포함(containing)한 블록의 우측 배치된다.

-> 하지만 float에 값을 지정하면, 부모가 높이를 인지할 수 없어서 부모를 벗어나는 상황이 발생한다.

5. float의 속성에 따른 문제점

float의 속성에 따라 요소가 해당 위치를 벗어나는 문제점이 발생한다. 이를 바로 잡기 위한 방법을 정리해보았다.

1. clear 속성

• clear: both;

가상요소나 의미없는 태그를 만들어 clear 속성을 적용 시켜야한다. 기법을 사용할 때에는 HTML코드를 더 입력해야한다는 부담이 된다. 또한 display :block; 속성에만 적용되기 때문에 유의하여 사용해야한다.

2. over-flow : hidden;

• over-flow : hidden;

배치가 필요한 요소의 부모태그에 over-flow : hidden; 속성을 적용시킨다.