float
블록 레벨 요소(Block-level Elements)는 원래 마크업을 할때 세로로 나열이 되지만, float을 이용하여 가로로 배치할수 있습니다.
float은 레이아웃으 만들기 위한 필수 적인 속성 입니다.
우선 사진은 블록 레벨 요소 중 하나인 <div>에 색깔과 크기를 주어 아래와 같이 여러개의 박스를 만들었습니다.
이처럼 세로로 블록 레벨 요소는 세로로 나열이 되기 때문에 이것을 자연스럽게 배치하기 위해 float을 사용합니다 .
float의 속성값 에는 " left " 와 " right "가 있습니다. (자연스럽게 배치하고 싶은 요소에 넣으시면 됩니다.)
※left : 요소를 왼쪽에 배치하고 나머지 요소 들과 자연스럽게 배치 되도록 합니다.
※right : 요소를 오른쪽에 배치하고 나머지 요소 들과 자연스럽게 배치 되도록 합니다.
clear
float된 블록 레벨 요소들의 바로 다음 블록 레벨 요소가 원래대로 아래에 배치 되도록 float을 해제시켜주는 아주 중요한 역활 입니다.
속성값: left,right,both가 있습니다, 하지만 left와 right는 사용 할경우가 거의 없으므로 both를 사용합니다.
| left | float된 블록 레벨 요소 중 좌측이 짧을 때 좌측의 빈 공간부터 채워 내려옴 |
| right | float된 블록 레벨 요소 중 우측이 짧을 때 우측의 빈 공간부터 채워 내려옴 |
| both | float된 블록 레벨 요소중 어느 쪽도 채우지 않고 다시 한단으로 배치 |
flat을 사용한 위 사진들을 보면 마지막 블록 레벨 요소<div id="footer">가 사라져있는것을 볼수 있습니다. 그 이유는 블록 레벨 요소<div id="footer">위에 있던 블록 레벨 요소<div id="article">가 float함으로 겹쳐져 있기 때문 입니다. 이것을 해제 시켜 다시 아래로 배치하기 위해 블록 레벨 요소<div id="footer">에 clear:both;를 넣어 줌으로써 아래 사진처럼 블록 레벨 요소<div id="footer">가 돌아 온것을 볼수 있습니다.
이후 모든 블록레벨요소를 자식으로 두고 있던 부모블록요소 <div id="wrap">에 margin: 0 auto; 를 넣어주면 모든 블록 레벨요소들이 중앙으로 가게되어 레이아웃 하나가 완성 됩니다.
