요소들을 나란히 배치하기 위해 float 을 쓴다.
그런데 가끔 내가 원하는 대로 한번에 깔끔하게 안될 때가 있다.
그럴 때마다 부모, 자식 요소 옮겨가며 float 시켜보거나 컨테이닝 블록을 수정해가며
어떻게든 나란히 배치시키는데..
개념적으로 다시 정리해 볼 필요가 있는 것 같다!
1. float 속성이 설정된 요소의 특징
-
float 스타일 속성이 적용된 요소는 컨테이닝 블록 안쪽의 왼쪽 또는 오른쪽에 배치된다.
-
float 스타일 속성이 적용된 요소는 문서의 일반적인 흐름에서 제거되므로 부모 요소의 컨텐츠로 인식되지 않는다.
- 모든 자식 요소들에 float 스타일 속성이 설정되면, 부모 요소의 컨텐츠가 없어진다.
-
다른 컨텐츠는 float 스타일 속성이 적용된 요소의 영역을 피해서 배치된다.
-
컨테이닝 블록은 그 요소와 가장 가까운 block 레벨 조상 요소의 컨텐트 영역을 말한다
2. float 속성을 적용했을 때 문제점
- 부모 요소 내의 모든 요소가 '부유하는 요소'가 된 경우
- 부모 요소 내에 아무런 내용이 없기 때문에 콘텐트 영역이 없다.
- '부유하는 요소' 다음에 다른 요소가 따라올 때의 문제점
- '부유하는 요소'로 인해 다음에 나오는 요소가 가려진다.
- 다음에 나오는 요소의 콘텐츠가 밀린다.
3. float 속성을 적용했을 때 문제점 해결
-
'부유하는 요소'를 담고 있는 부모 요소의 높이 고정
-
'부유하는 요소'를 담고 있는 부모 요소에 float 속성 적용
- { float: left; }
-
'부유하는 요소'를 담고 있는 부모 요소에 overflow 속성 적용
- { overflow: hidden; }
-
'부유하는 요소' 다음에 clear 속성을 갖는 빈 요소 추가
-
'부유하는 요소'를 담고 있는 부모 요소에 after 가상 선택자를 사용해 clear 속성 적용
/*
- 가상 요소는 인라인 형식의 요소이다.
- 블록 형식의 요소가 필요하므로 display: block 을 준다.
- clear 속성으로 인해 가상 요소는 float 속성이 적용된 요소 아래로 떨어지게 된다.
- 이로 인해 부모 요소는 float 속성이 적용된 요소와 가상 요소를 포함하는 영역을
차지하게 된다.
*/
#container::after { content: ""; display: block; clear: both; }3.1. clear 속성
: 요소의 어느 쪽에 부유하는 요소가 오지 못하게 할 것인지 지정
| 속성 값 | 설명 |
|---|---|
| none | 요소의 양쪽에 부유하는 요소가 올 수 있도록 허용(기본값) |
| left | 요소의 왼쪽에 부유하는 요소가 오지 못하도록 설정 |
| right | 요소의 오른쪽에 부유하는 요소가 오지 못하도록 설정 |
| both | 요소의 양쪽에 부유하는 요소가 오지 못하도록 설정 |
