CSS : float

CSS float

'띄우다'라는 뜻처럼, 요소를 '띄우는' 방식을 통해 다른 요소들과의 배치를 정의한다 (보통 다른 요소들이 '띄운' 요소를 감싸는 레이아웃을 구현하기 위해 사용한다) float 프로퍼티에 아래와 같은 값을 지정할 수 있다.

* float : left, right을 지정시 기존의 display 프로퍼티는 무시됨

• inherit : 부모 요소에서 상속
• left : 왼쪽에 float되는 박스를 생성하고, 다른 요소는 해당 박스의 오른쪽에 위치. (위 -> 아래로 흐름)
• right : 오른쪽에 float되는 박스를 생성하고, 다른 요소는 박스의 왼쪽에 위치 (위 -> 아래로 흐름)
• none : 요소를 float하지 않음

Float 사용

float 프로퍼티는 1) 한 요소를 다른 요소가 둘러싸게 하거나 (이미지를 텍스트가 둘러쌈), 2) 웹페이지의 요소들 (nav, section, sidebar, footer)에 적용하여 웹페이지 전체 레이아웃을 구성하기 위해 사용한다.

css-tricks.com

css-tricks.com

Clear

clear 프로퍼티는 지정하는 요소와 근접한 float 요소들이 있을 경우에, 이를 float 특성을 clear(취소)하고 밑으로 내려갈 수 있게 하는 기능이다. left, right, both를 지정하여 해당 요소 왼쪽, 오른쪽, 양방향의 floating요소들을 해제할 수 있다.

 

float으로 인해 발생하는 문제들

자식 요소에 float을 지정할 경우 부모 요소의 길이와 맞지 않아 float된 요소가 밖으로 흘러 넘치게 보이는 현상이 발생한다. 이를 해결하기 위해서는 :

1) html 문서에서 해당 부모 요소 마지막에 태그를 한 개 더 추가하여 clear 속성을 부여

2) 부모 요소에 overflow : hidden을 지정하여 float으로 넘칠 경우에 내용을 숨길 수 있게 설정할 수 있다.

3) 부모 요소에도 float을 지정하여 자식 요소의 float을 인식하게 만들 수 있다. (하지만 해당 경우 부모 요소가 모두 float처리 되므로 block 요소의 성질을 잃게 된다.)

참고 : float의 overflow문제를 해결하는 clearfix방법에 대한 정리 (링크)

 

참고 

1. css-tricks (링크)

2. poeima (링크)