float

float

float은 레이아웃을 잡는 데에 많이 사용되던 속성이다.

요즘에는 flex 속성을 기반으로 하여 레이아웃을 잡는 경우가 훨씬 많기 때문에 float은 자주 사용되지 않고 있다. 

 

출처: https://developer.mozilla.org/ko/docs/Web/CSS/float

 

위 이미지는 float: right를 적용한 그림이다.

이처럼 float은 부모 컨테이너 안에서 float을 적용한 자식 요소를 left, right, none의 값을 통해 배치할 수 있다.

 

none

• default값으로 아무런 float속성값을 할당하지 않는다.

left

• 적용한 요소를 왼쪽으로 배치한다.

right

• 적용한 요소를 오른쪽으로 배치한다.

 

float 속성을 가진 요소는 부모가 높이를 인지할 수 없다!

그렇기 때문에 float속성을 지정하게 되면 부모 요소를 벗어나게 된다.

 

이를 위한 해결방법이 몇가지 있다.

 

1. 부모 요소(감싸고 있는 컨테이너)의 마지막에 아무런 태그를 넣고 clear 속성(none, left, right, both)을 적용한다. 

2. 부모 요소의 css 속성 값에 overflow: hidden; 속성을 적용한다

3. 부모 요소도 float속성을 적용한다. (부모 요소의 block성질이 사라지게 된다.)

 

See the Pen float by JAEWOOKJUNG (@JAEWOOKJUNG) on CodePen.

*codepen의 result 크기를 0.5x로 보고 확인

*codepen 예제에서는 위 해결방법 중 1,2번을 구현하였다. (주석처리를 풀고 확인가능)

---

참고

developer.mozilla.org/ko/docs/Web/CSS/float

float - CSS: Cascading Style Sheets | MDN

developer.mozilla.org/ko/docs/Web/CSS/clear

clear - CSS: Cascading Style Sheets | MDN