[CSS] Float, Position

 

 

Block과 inline으로 content가 배치된 것을 normal flow라고 한다.

하지만, 이것만으로는 정교한 레이아웃의 형식을 구성할 수 없기 때문에 float, position 등을 사용해야 한다.

Float

• Left, right 지정 가능
• 워드에서 글 중간에 이미지 배치하는 것과 유사한 개념이라고 생각하면 된다.
• 단을 나눌때에도 사용 가능하다.
• Clear: both;
  • 공간이 남을 때 float를 해제한다.

Position

• 기본 값은 position: static;
• Top, bottom, right, left로 위치 지정이 가능하다.
• 워드에서 글 앞에 이미지 배치와 유사한 개념이라고 생각하면 된다.
• Position: relative;
  • 기본 위치에서 값만큼 이동한다.
• Position: absolute;
  • 원래 위치와 상관없이 0,0을 기준으로 위치 지정된다.
• Position: fixed;
  • 스크롤이 생겨도 그 위치에 그대로 위치한다.