float
요소를 좌우 방향을 띄움
css3 에서 flex가 도입되면서 잘 안쓰게 되었지만,
크로스 브라우징을 위해 사용될 수 있음
- none
- left
- right
html 은 수직으로 컨텐츠가 쌓이게 되는데,
float를 사용하면, left, right 를 사용하면 내용들이 내 태그의 어느쪽으로 흐르게 할 지 결정할 수 있음
수평 정렬
float를 이용한 수평 정렬이 가능
기본적으로 블록들은 수직으로 쌓이는데 float를 넣으면 좌측부터 쌓이게 됨.
float: right 를 넣으면 우측부터 쌓이게 됨.
float를 지정해주고, 다음 요소부터 float를 해제해주고 싶다면, clear라는 속성을 넣어주어야 함. 안 넣어주면 겹쳐지게 됨.
clear
흐르는 것을 멈추고 처음부터 시작하게 만들 수 있음.
부모요소에서 해제해주는 방법!
<div class="parent clearfix">
<div class="child"></div>
<div class="child"></div>
</div>.clearfix::after{
content: "";
clear:both;
display:block;
}
.child{
float:left;
}이렇게 써주면 float가 적용된 자식 요소가 끝나자마자 clear를 해주기 때문에 그 부모 내에서는 자유롭게 float를 사용해되 되는 것.
display 속성 변경
float 속성이 추가된 요소는 block 속성으로 바뀌게 된다.
flex 속성은 float 지정이 되도 block으로 바뀌지 않음
position
static
보든 요소는 static 이 기본값.
배치를 할 수 없는 상태
relative
요소 자신을 기준으로 배치
자기 자신이 원래 있었던 위치를 기준으로 top, left 등을 움직이게 됨
absolute
위치 상 부모 요소를 기준으로 배치
html 상의 부모를 의미하는 것이 아님
position이 부여되어있어야 위치 상 부모로 삼을 수 있음.
position:relative 를 부모요소에 반드시 주어야 함.
relative가 아니어도 가능은 하지만, 전체적으로 포지션이 깨질 수 있으므로 relative가 가장 안정적임
fixed
뷰포트 기준으로 배치
top, left, bottom, right
position 기준에 맞는 ~에서의 거리를 설정
