css 요소를 띄워주고 위치를 지정해주는 속성!

1. float

float 요소를 좌우 방향으로 띄워주는 속성!

값으로는 왼쪽으로 띄워주는 left, 오른쪽으로 띄워주는 right가 있다

요소를 띄운 상태에서 새로운 요소를 만들게 되면 띄워준 요소와 겹치는 현상이 발생해 float 속성을 해제해주어야 하는데,

보통 부모 요소에 clearfix 클래스를 추가해서 아래와 같이 사용해주면 해결이 된다.

<div class="container clearfix">
  <div class="box"></div>
  <div class="box"></div>
</div>

.clearfix::after {
  content: "";
  clear: both;
  display: block;
}

.box {
  float: left;
}

또 다른 특징은 float 속성이 추가된 요소는 display 속성 값이 대부분 block으로 바뀐다.

 

2. position

position 요소의 위치를 지정하는 기준을 설정해준다.

속성의 값

• relative 요소를 자기 자신을 기준으로 배치한다. 원래 자기가 있던 위치가 계속 유지된다.
• absolute 요소를 위치상 부모 요소를 기준으로 배치한다. 배치하려고 하는 부모 요소에 position 값이 있어야 한다. 보통은 relative !
• fixed 요소를 브라우저를 기준으로 배치한다.
• sticky 요소를 스크롤 영역을 기준으로 배치한다. 부모 요소를 넘어갈 순 없다.

기준이 정해진 상태에서 top, bottom, left, right 로 위치를 정할 수 있다.

absolute 나 fixed 값이 적용된 요소는 대부분 display 속성이 block 으로 바뀐다.