반응형
Float
블록 요소를 인라인 요소 처럼 사용하기 위해 사용
레이아웃 상의 오류 상속 해제해야함
div {float :left;}
property value : 속성값
left : 좌측으로 float 1 2 3 4
right : 우측으로 float 4 3 2 1
none : 속성없음 상단부터 하단으로 정렬
Float 속성 해제
clear:both;
overflow:hidden;
clearfix - 가장 편안하게 플로트를 해지하는 방법으로 플로트가 들거간 속성의 부모요소에 적용
<
.box{float left;}
<div class="clearfix"> - clearfix 가 있는 요소 안에서만 float가 적용되도록 설정하는것!
<div class="box"></div>
<div class="box"></div>
</div>
Position
relative : 상대위치 자기가 원래 있던 위치를 기준으로 위치를 잡을 때 사용
absolute : 부모요소 절대 위치 (반드시 부모 요소에 position 값이 필요)
fixed : 브라우저 기준 절대위치
<속성>
- top
- bottom
- left
- right
※ top과 bottom 중 한개 left 와 right 중 각각 한 방향으로만 사용 가능하다.
부모요소에 포지션 값이 없을 경우 자식 요소는 브라우저 기준으로 위치가 설정된다.
자식요소에 포지션이 absolut가 들어간 경우 부모요소에는 포지션 relative 가 기본으로 들어가야 위치가 정 위치가 나온다.
728x90
반응형
