float
-
float 속성은 block 타입 요소의 정렬을 위해 사용합니다. 사실 float 속성은 요소를 위로 띄우는 속성입니다.
-
값 의미 기본값 none 요소 띄움 없음 none left 요소를 띄운 뒤 이동할 수 있는 가장 왼쪽으로 배치 right 요소를 띄운 뒤 이동할 수 있는 가장 오른쪽으로 배치
float 속성의 특징
float 속성을 적용한 요소에는 네 가지 특징을 갖게 됩니다.
-
float된 요소는 위로 띄운 후 배치되며, 배치되는 영역은 자신의 부모 요소의 content 영역 내에서 배치됩니다.
-
float된 요소는
display: block;으로 수정이 됩니다. 주의할 점으로 inline-block 특성처럼 동작합니다. -
float된 요소는 이미 float된 요소들 끼리 영향을 받아 배치가 됩니다.
-
주변 block 타입 특성을 갖는 것들은 float된 요소를 없는 요소처럼 배치가 되지만, inline 타입 특성을 갖는 것들은 float된 요소를 인지하여 배치가 된다.
첫 번째 특징
요소에 float 프로퍼티를 작성하게 되면 float된 요소는 부모 요소의 content 영역에 없는 것처럼 배치가 됩니다.
즉, 부모 요소는 float된 자식 요소를 없는 요소처럼 취급하고, float된 요소의 형제 요소들도 float된 요소들을 없는 요소로 취급하여 배치됩니다.
일단 요소를 float하게 되면 부모 요소와 주변 형제 요소들은 float된 요소를 없는 요소로 취급하여 배치가 됩니다.
그리고 float 된 요소는 부모 요소의 Content 영역 내에서 배치가 됩니다.
위 그림에서 각 child 요소들은 가로 150px, 세로 150px로 설정되어 있습니다. 그리고 child를 감싸는 부모 요소는 가로 너비값만 300px로 명시했습니다.
이때 child 요소를 감싸는 부모 요소의 heigth 값은 자신의 content 영역에 존재하는 모든 요소의 heigth 값의 합인 600px로 지정됩니다.
위 그림은 child1 요소(하늘색 요소)에 float: left;를 지정하게되면 부모 요소는 float된 child1 요소(하늘색 요소)를 없는 요소로 인지하게 됩니다. 그러므로 부모 요소의 heigth 값이 600px에서 child2와 child3의 heigth 값의 합인 400px로 설정됩니다.
만약 부모 요소의 모든 자식 요소가 float 속성을 갖고 있다면 부모 요소의 heigth 값은 0이 됩니다. 즉, 부모와 형제 요소들은 float 속성이 지정된 요소를 제외하고 배치와 너비가 설정됩니다.
child2 요소(회색 요소)는 child1 요소(하늘색 요소)를 없는 요소로 취급하여 현재 child1 요소 아래에 배치되어 있고, child3 요소(빨간색 요소)는 child2 요소 아래에 배치가 되어 있습니다.
float된 child1 요소(하늘색 요소)는 자신이 갈 수 있는 공간(부모 요소의 Content 영역) 중에서 가장 왼쪽으로 이동하게 됩니다.
주의할 점으로 float된 요소가 배치될 위치인데 만약 child2 요소(회색 요소)에 float 속성을 지정하게 되면 아래와 같은 결과가 나타납니다.
float된 child2 요소(회색 요소)는 자신이 갈 수 있는 가장 왼쪽으로 배치가 되고, child3 요소(빨간색 요소)는 child2 요소 아래에 배치가 된 그림입니다.
float된 child2 요소(회색 요소)가 배치 가능한 영역은 이전 형제 요소(블록, 인라인 모두)가 차지하고 있는 영역을 제외한 영역을 의미합니다.
첫 번째 특징 정리
-
float 속성 지정시 부모 요소와 주변 형제 요소들은 float 속성이 지정된 요소를 없는 요소로 취급하여 배치가 됩니다.
-
float 속성 지정한 요소의 경우 위로 띄운 후, 부모의 Content 영역 내 이전 형제 요소들이 배치된 영역을 제외한 나머지 영역 내에서 배치가 됩니다.
두 번째 특징
float 속성을 지정한 요소는 기본적으로 block 타입 요소로 바뀌게 됩니다. 즉, float 속성을 지정하게 되면 display: block;으로 변경됩니다.
위 그림의 child들은 모두 인라인 요소입니다. 부모 요소는 블록 요소이며 width가 300px로 설정되어 있습니다.
위 그림은 child1 요소에 float: left;, width: 100px, height: 100px;을 설정한 예제입니다.
이처럼 float 속성을 지정하게 되면 display: block;으로 자동 변경 되며 width, heigth, margin, padding 속성을 모두 사용할 수 있게됩니다.
위 그림은 각 child는 모두 블록 요소이며, height 값만 150px로 설정되어 있습니다. 그리고 부모 요소는 width 값만 200px로 설정한 그림입니다.
child1 요소에 float: left;를 작성하게 되면 위와 같은 그림이 출력됩니다.
즉, float를 설정하면 블록 요소로 바뀌긴 하지만 일반적인 블록 요소처럼 width 값이 설정되어 있지 않은 경우 width가 부모의 content 영역 가로 너비 전체를 차지하지 않으며, 자신의 content만큼 가로 너비를 갖게 됩니다.
그리고 일반적인 블록 요소처럼 width 값이 명시되어 있는 경우 남은 가로 너비를 자동으로 모두 margin으로 채우지 않습니다.
다시 말해, display 속성값이 block으로 변경되는 것은 맞지만 기존 block 요소처럼 widht 값을 100%로 사용하지 않고 Content 영역 너비만큼 사용하게 됩니다.
이는 inline-block 특성을 갖는것 처럼 동작합니다.
두 번째 특징 정리
-
float 속성을 지정하게 되면 display 속성값이 block으로 변경되어 블록 요소가 되어 width, heigth, margin, padding 속성을 설정할 수 있습니다.
-
일반적인 블록 요소처럼 width 값을 명시하지 않은 경우 가로 너비를 부모의 가로 너비 전체를 사용하지 않고, 남은 가로 너비 또한 margin으로 채우지 않습니다. 이는 inline-block 타입의 요소와 유사한 특징을 갖게 됩니다.
세 번째 특징
위 그림은 각 child가 모두 블록 요소이고, width와 height가 각각 150px으로 명시했습니다.
그리고 child를 감싸는 부모 요소도 블록 요소이며 width 값만 300px로 명시하였습니다.
child1에 float: left; 속성을 추가하고, child2에도 float: left; 속성을 추가하면 아래와 같은 그림으로 출력됩니다.
즉 child1과 child2는 위로 붕 뜨게 되고 다음과 같이 배치됩니다. 즉, float 속성이 지정된 형제 요소들 끼리 영향을 받아 배치가 됩니다. 이때 child3 요소는 child1 요소 아래에 존재하고 있습니다. 그리고 부모 요소의 height 값은 450px에서 150px로 줄어들게 됩니다.
child3에게도 float: left;를 적용하게 되면 아래와 같은 그림으로 출력됩니다.
child3는 붕 뜨게되며 자신이 갈 수 있는 공간 중에서 가장 왼쪽으로 배치가 됩니다. 하지만 부모의 width 값은 300px로 이미 child1, child2가 배치되어 있으므로 다음과 같이 배치가 됩니다.
이때 부모 요소는 height 값이 0으로 줄어들게 됩니다(부모 요소 안에 자식 요소가 배치되어 있지 않으므로). height가 0이라는 것은 영역을 차지하지 않다는 것을 의미합니다.
세 번째 특징 정리
-
부모 요소의 Content 영역 내 float된 요소가 배치되는데 float 된 요소들은 이전 형제 요소가 차지하고 있는 영역을 제외한 영역 내 배치가 됩니다.
-
float된 요소는 float 된 형제 요소들끼리 영향을 받아 배치가 됩니다.
네 번째 특징
위 그림은 child1와 child2 요소 사이에 인라인 요소를 작성한 그림입니다. 각 child 요소는 블록 요소이며 가로, 세로 너비를 150px로 지정하였고, 부모 요소는 가로 너비만 300px로 지정한 그림입니다.
만약 모든 child1 요소에 float 속성을 left로 지정하게 된다면 아래와 같은 그림이 결과로 나타납니다.
child1 요소에 float을 설정하여 띄운 후 배치했습니다. 이때 인라인 요소는 child1 요소 밑에 배치가 되지 않고, 옆에 배치가 되는 것을 확인할 수 있습니다.
이처럼 block 특성을 갖는 것들은 float 속성을 갖는 요소를 없는 요소로 취급하여 배치되지만, inline 특성을 갖는 인라인 요소나 텍스트 콘텐츠, 이미지와 같은 것들은 float된 요소를 존재하는 요소처럼 인지하여 배치가 됩니다.
clear
clear 속성을 사용하여 레이아웃을 원래대로 되돌릴 수 있습니다.. clear 속성은 float된 형제 요소들을 인지할 수 있게되어 본래 레이아웃으로 배치가 됩니다.
주의할 점으로 clear 속성은 display: block;인 요소만 적용할 수 있습니다.
위 그림은 child1 요소에 float 속성값을 left로 작성하였습니다. 그리고 인라인 요소가 float 된 요소의 존재를 인지하여 배치가 된 그림입니다.
이때 float 속성을 작성한 child1 요소의 바로 다음 형제 요소인 인라인 요소에게 clear 속성값을 left로 작성하면 아래와 같은 결과가 나타납니다.
인라인 요소가 더이상 float된 요소 옆으로 배치가 되지 않고 기존 블록 요소처럼 동작하게 됩니다.
즉, float된 요소의 다음 형제 요소에 claer 속성을 추가하여 레이아웃을 원래 상태로 되돌릴 수 있습니다.
clear 속성은 float된 요소들을 인지할 수 있도록 해주는 속성입니다. 참고로 claer 속성은 display: block;인 블록 요소에만 작성 가능한 속성입니다.
| 값 | 의미 | 기본값 |
|---|---|---|
| none | none | |
| left | float: left;된 요소들을 인지 | |
| right | float: rigth;된 요소들을 인지 | |
| both | float: left, right 모두 인지 |
만약 float된 요소의 다음 형제 요소가 없다면 의미 없이 형제 요소를 추가하여 claer 속성을 추가해야 합니다. float된 요소들 때문에 망가진 레이아웃을 고치기 위해 억지로 형제 요소를 추가해야하는 것은 추천하지 않습니다.
clearfix
claerfix를 사용하여 해결할 수 있습니다. claerfix는 따로 존재하는 속성이 아닌 클래스 명입니다.
claerfix는 가상 요소 선택자(::after)와 claer 속성을 사용하는 방법으로 오직 CSS로만 레이아웃을 고칠 수 있는 방법입니다.
이 방법은 임의의 HTML 요소를 만들지 않고 부모 요소에 가상 요소를 삽입하여 가상 요소에 clear 속성을 추가하는 방법입니다.
가상 요소란 CSS코드로 요소를 생성하는 것으로 위 그림과 같이 child를 감싸는 부모 요소안에 가장 첫 번째 자식 요소로 임의의 가상 요소를 삽입하거나, 가장 마지막 자식 요소로 임의의 가상 요소를 삽입할 수 있습니다.
가상 요소 선택자를 사용할 때는 반드시 필수적으로 사용해야 하는 속성으로 content라는 속성이 존재합니다. 참고로 가상 요소는 display: inline;으로 인라인 타입의 요소입니다.
.clearfix::after {
content: "";
display: block;
clear: both;
}위 코드처럼 clearfix라는 클래스를 가진 요소에 가상 요소 선택자 ::after를 사용하면 요소 가장 마지막 자식 요소로 content에 작성한 내용이 추가가 됩니다.
그리고 가상 요소는 일반적으로 인라인 타입이므로 display: block;으로 블록 요소로 바꾼 뒤 clear: both;를 작성하여 레이아웃을 고칠 수 있습니다.
이 코드를 CSS에 작성하게 되면 clearfix라는 클래스 명을 가진 모든 요소에 적용이 되므로 float된 요소를 갖는 부모 요소에 일일히 코드를 작성하지 않고 class 값으로 claerfix를 추가하는 것만으로 해결할 수 있습니다.
이때 주의할 점으로는 부모 요소의 마지막 자식 요소가 float인 경우에 적용되며 마지막 요소의 레이아웃만 되돌리게 됩니다.
만약 중간에 float된 요소가 존재하여 중간 레이아웃을 되돌려야하는 경우 다음 형제 요소에 clear 속성을 명시적으로 작성해주어야 합니다.
