1. float와 overflow를 사용해 배치

자식요소에게 부여

어떤 요소를 왼쪽/오른쪽으로 배치하고 싶을 때 float: left 혹은 float: right를 입력한다. 가운데 배치를 하고 싶을 경우 margin: auto를 입력한다.

• float 속성은 요소의 디스플레이 속성이 인라인이냐 블록이냐 상관 없지만 margin: auto는 block 요소에만 적용된다.
• 아무래도 요소들 기본 배치가 왼쪽상단 기준이라 착각할 수 있는데, float 기본값은 float: none이다. float: left가 아님

자식 요소에게 float 값을 주었더니 부모 div의 높이값이 사라졌다. float(부유)되어 부모손을 떠나버린 그림을 상상하기.
이럴 때 부모 요소에게 overflow: hidden값을 입력해주면 자동으로 크기가 자식요소에 맞추어진다.

예제 연습 중, span 태그에 입력한 크기값이 적용되어 잠깐 혼란스러웠다. span 태그는 인라인 태그라 크기값이 적용되지 않는게 맞으나, float 속성값을 주면 그 요소는 inline-block 요소가 된다고 한다.
(추가+) 원래 디스플레이 속성이 inline-block인 요소들은 자체적으로 마진을 갖고 있으나, float 속성으로 인해 inline-block이 된 요소들은 자체 마진을 갖고 있지 않다고 한다. 신기하당..

2. text-align: center 사용

부모요소에게 부여

이 경우는 자식 요소가 inline 혹은 inline-block 일 때 사용한다. 자식 요소를 가운데로 보내고 싶은데 앞에서 소개한 margin: auto는 block 요소에만 적용할 수 있으니 부모요소에 text-align: center 속성값을 준다.

• text-align 속성은 block에는 적용되지 않는다.

float 속성은 상속되는 성질이 있다. CSS 코드에서 float을 사용하면 그 아래 선택자에도 float 속성이 상속되는데, 이럴 경우 clear 속성을 사용한다.

clear 속성은 left, right, both 세 가지 속성값이 있는데, left/right은 어느 한 방향의 float 값만 없애고 싶을 때 사용하고 both는 양방향 모두 clear 한다. 때문에 보통은 clear: both를 주로 사용한다.