float

• content들을 수평으로 배치하고 싶을 때 사용합니다.
• 속성 값으로는 left, right가 있습니다. 전자는 좌측으로 부유, 후자는 우측으로 부유시킵니다.

중앙정렬

• width를 주고, margin: 0 auto;로 주기

수평정렬 1

• 자식 태그에 float, width를 주고, 부모 태그에 overflow: hidden을 주기
• 자식 태그의 너비의 합 = 부모 태그의 너비
• 부모 태그에 overflow: hidden을 주는 이유는, 자식이 float 속성을 가지고 있으면, 부모 태그의 영역 밖에서 부유하기대문에, 부모 태그에서 자식의 높이를 알 수 있는 방법이 없어서 전체 부모의 너비를 계산할 수 없게되는데, 이를 해결해주는 것이다.

수평정렬 2 - 차선

• 자식 태그에 float, width 주고, 부모 태그에 :after 가상 선택자 주고, 속성으로 clear: both, content: '', display: block 주기
• IE 버전에 따라 지원하지 않으므로 여러 호환성을 체크해주어야합니다.

수평정렬 3

• 부유하는 태그 마지막에 형제 태그를 하나두고, clear: both를 주면 된다.
• 이 방법은, 수평정렬이 되지만, 쓸모 없는 태그가 하나 더 생긴다는 단점이 있고, 추가로 부모 태그가 자식의 크기를 여전히 알아보지 못하는 문제가 발생합니다.

수평정렬 4 - 가장 좋다

• 자식 태그에 width를 주고(주지 않아도 상관은 없는데, 비율 조정), 부모에 display: flex 주기
• 구버전의 IE에서 작동하지 않는다.