float을 왜 활용하는가?
블록요소는 원래 세로로만 나열되지만 float을 사용하면 가로로 배치 할 수 있습니다.
세로로만 나열되던 블록들을 가로로 서로 어울리게 배치하려 할 때 유용합니다.
float
요소를 좌측이나 우측에 붙이고 아래 내용이 그 주변을 흐르게하는 속성입니다.
float 한 박스에 가로 사이즈를 지정해주어야 크로스브라우징됩니다.
인라인 요소들은 가로사이즈 없이 float 해도 레이아웃이 흐트러지지 않습니다.
float을 취소할 때에는 float: none;을 합니다.
float: left;
요소를 왼쪽에 배치하고 나머지 콘텐츠는 그 주변을 흐르도록 합니다.
예시 이미지를 보시면 아래로 나열되어야 할 콘텐츠를 우측 옆에서 흐르도록 배치해 줍니다.
float: right;
요소를 오른쪽에 배치하는 것 말고는 left와 차이점이 없습니다.
clear: both;
clear의 속성으로 left, right, both가 있는데 left와 right는 사용할 일이 거의 없습니다.
clear: both;는 float된 박스 중 어느쪽도 채우지 않고 한단으로 배치합니다.
쉽게 말해 옆으로 같이 딸려 올라간 박스를 아래의 원위치로 되돌려줍니다.
다음은 예시를 들어 clear: both;를 설명하겠습니다.
float이 들어가지 않은 레이아웃의 모습입니다.
사이드 부분은 왼쪽, 콘텐츠는 오른쪽에 있게 배치해야하므로 float: left;를 사용하겠습니다.
float: left;를 주었더니 다음과 같이 footer부분이 사라졌습니다.
footer부분에 clear: both;를 사용해보겠습니다.
다시 footer부분이 나타났습니다.
이상 css의 float 사용법에 대해 알아봤습니다.