float 속성
float 라는 단어는 원래 ‘뜨다’ 라는 의미이며, 원래 웹페이지에서 이미지를 어떻게 띄워서 텍스트와 함께 배치할 것인가에 대한 속성이다.
float: left
float 속성은 자기 자신의 위치를 주변의 콘텐츠로부터 상대적으로 배치하는 속성입니다. float은 사전적 의미로 ‘뜨다, 띄우다, 뜨는 물건, 부유물’ 이라는 의미가 담겨져 있습니다. float은 높이가 가변적인 다단 컬럼 형태의 CSS 레이아웃을 위하여 반드시 요구되는 속성입니다.
속성값
left: 왼쪽에 부유하는 블록 박스를 생성. 페이지 내용은 박스 오른쪽에 위치하며 위에서 아래로 흐름.right: 오른쪽에 부유하는 블록 박스를 생성. 페이지 내용은 박스 왼쪽에 위치하며 위에서 아래로 흐름. 이후 요소에 clear 속성이 있으면 페이지 흐름이 달라짐. none 이 아니라면 display 속성은 무시된다.none: 요소를 부유시키지 않음inherit: 부모 요소에서 상속
float을 clear하는 5가지 방법
float 속성을 이용한 요소들은 그 부모 요소의 높이값이 사라지므로, float 속성을 이용하여 정렬을 한 후에는 반드시 float 속성을 해제해주어야 합니다.
기본적으로 float 속성을 해제하는 속성은 다음과 같습니다.
claer: both;
이 속성을 이용하여 float된 자식 요소의 높이를 부모 요소에 반영하도록 대응하는 방법들은 여러가지가 있습니다.
(1) float에 float으로 대응하는 방법
부모 요소에게도 float 속성을 부여하는 방법입니다. 부모 요소에게 float 속성을 부여하게 되면 부모 요소는 자식 요소의 높이를 반영합니다.
단점은 부모 요소의 너비가 float된 자식 요소들의 너비를 담을 만큼만 줄어든다는 것입니다. 부모의 너비가 브라우저 크기에 따라 가변적이어야 하는 경우에 적용하기 힘들고, 조상 요소들이 겹겹이 존재하는 경우 자식의 높이를 조상 요소에게 각각 전달하기 위해서 조상 요소 모두 float 시켜야 하는 문제점이 있습니다.
(2) float을 display:inline-block 으로 clear 하는 방법
부모 요소에 display: inline-block 속성을 부여하는 방법입니다. 하지만, inline-block 속성을 갖게 된 요소는 인라인 요소와 마찬가지로 박스가 끝나는 지점에 약 4px 정도의 공백을 갖게 되므로 이점 유념하시는게 좋겠습니다. 이 때는 inline-block 속성을 주신 요소에 vertlcal-align: top 을 추가하면 하단 공백이 없어집니다.
(3) float에 overflow 속성으로 대응하는 방법
부모 요소에 overflow: auto 또는 overflow: hidden 속성을 부여하는 방법입니다. overflow: auto 속성은 자식 요소의 너비가 가변적이고 부모 요소의 너비보다 커지는 상황이 발생할 때 가로 스크롤바를 유발하기 때문에 일반적으로 권장하는 방식이 아닙니다. overflow: hidden 속성은 그러한 상황에서 가로 스크롤바를 유발하지는 않지만 자식의 너비가 넘치는 경우 넘치는 부분이 잘리기 때문에 이 역시 완전하게 안전한 방법은 아닙니다.
(4) float을 빈 엘리먼트로 clear 하는 방법
float 속성이 지정된 요소 뒤에 빈 요소를 넣고 빈 엘리먼트에 clear:both 속성을 부여하여 부모 요소가 자식 요소의 높이를 인식하도록 하는 방법입니다. 하지만 의미 없는 빈 요소를 사용하기 때문에 이 역시 권장되는 방법은 아닙니다.
(5) float을 가상 선택자 :after로 clear 하는 방법
빈 요소 대신에 '가상 선택자(존재하지 않는 요소를 가상으로 생성해내는 선택자)'를 이용하는 방법입니다.
#container:after {
content: '';
display: block;
clear: both;
}
(6) 제일 권장하는 방법
(5) 가상 선택자 :after로 clear 하는 방법을 가장 추천합니다. 덧붙여서 float 속성을 해제하는 경우는 빈번하게 사용되므로 이 속성을 클래스로 관리하는 것이 좋습니다.
.group:after {
content: '';
display: block;
clear: both;
}