...
Css 레이아웃을 만들 때, 정렬을 위한 방법 중 float 유형을 알아보겠습니다.
위 사진을 표본으로 레이아웃을 구성해 보겠습니다.
기본 틀
Float 사용
float은 요소를 좌측이나 우측에 붙이고 아래 내용이 그 주변을 흐르게 하는 속성입니다.
세로로만 나열되던 블록들을 가로로 서로 어울리게 배치하려 할 때 매우 유용합니다.
결과를 보시면 좌우로 나열된 것을 볼 수 있지만, footer가 사라진 것을 확인하실 수 있습니다.
float을 사용한 다음 컨텐츠가 주변을 흐르게 되어 깨짐 현상이 나타나는 것인데
clear 속성을 이용해 float을 해제시켜주는 과정이 필요합니다.
footer에 clear 속성을 추가해주니 깨지지 않고 원래 모양을 유지하며 결과가 출력되는 것을 보실 수 있습니다.
clear 속성 외에 float을 해제하는 방법이 더 있는데 한번 알아보도록 하겠습니다.
overflow: auto;
float을 사용한 박스들을 포함하는 부모요소에게 overflow : auto 값을 주면 float이 해제됩니다.
float 속성값이 포함된 박스들을 포함하는 부모요소에 clearfix의 class를 부여하고
모든 clearfix class에게 동시에 적용시켜, float을 사용할 때 clearfix라는 class만 부여하여 clear속성값을 부여하는 방법도 있습니다.