[CSS]레이아웃- HTML 좌우배치: float 과 inline-block

• float 
  • float : left;  = 요소를 붕 띄워서 왼쪽에 정렬한다.
  • float 를 사용하면 붕 띄워있기 때문에 div 등을 추가하면 겹쳐서 보이지 않는 문제가 발생한다
  • 이를 해결하기 위해서는 float 를 가진 태그 뒤에 오는 태그에 clear : both 를 추가해 문제해결

.middle {
	float : left;
}
.bottom {
	claer : both;
}

• inline-block
  • display : block : 한 행을 전부 차지
    • div 박스, p 태그 등은 block 특성을 가지고 있음 
  • display : inline-block : 내 크기만큼 차지
    • 띄어쓰기만 있어도 공백이 생겨서 불편함 
  • vertical-align : top; bottom ...
    • 인라인블록 에서 글자를 쓸때 필요함..
      • 인라인블록 시 베이스라인에서 박스가 발작하기 때문
    • 인라인블록 또는 인라인인 요소들에만 적용이 가능