float

최지원·2020년 5월 29일
0

float

  1. 웹 사이트 전체의 레이아웃을 구성(웹 사이트를 구성하는 요소들을 배치할 공간을 분할하고 정렬하는 것)
  2. 요소들을 정렬하는 방법 중의 하나

정렬하고자 하는 요소에 대하여 CSS Selector를 통해 {float: left(or right);} 같은 방식으로 원하는 위치로 정렬할 수 있다.

웹 사이트 전체적인 구성 상, 메인 컨텐츠의 좌,우에 위치하는 사이드바(aside 태그)의 위치를 정의하는 등의 목적으로 활용된다. 또는 이미지를 텍스트와 함께 배치하기 위한 목적으로도 사용할 수 있다.

상황에 따라 float을 해제하고, float 요소의 아래에 위치시켜야 하는 경우에는 clear라는 속성을 사용한다. {clear: left/right/both;} 를 통해 정렬된 방향에 맞게 요소를 이동시킬 수 있다.

float 속성을 통해 정렬을 하였으나, 요소 간의 높이의 차이로 인하여 외관 상 깔끔하지 못한 경우에는 {overflow: auto} 를 통해 크기를 조정할 수 있다.

0개의 댓글