[KDT]FCFE - 2주5일 배치 ( float & position )

Keunyeong Lee·2021년 12월 3일
0
post-thumbnail

배치

float!

float 층에 띄우기!

float: left;

float 층에 띄우고 아래에는 인라인이 올수 없기 때문에 글이 옆으로 흐른다.

float 층으로 떠버리면 기본흐름(normal floor) 층의 나머지는 크기에 맞춰 조정된다.

크기에 맞추기위해 다시한번 랜더 트리를 그리도록 한다. ( BFC 재계산을 일으키는 여러가지 방식 )

overflow: hidden;

그러면 이미 떠있는 float을 확인하고 랜더 트리를 그린다.

or ::after 를 활용하여 다시 그리도록 한다.

or 또다른 요소에 clear를 줘서 BFC 재계산을 일어나게 한다.

이미 float에 떠있는 것을 overflow:hidden 으로 BFC 재계산을 했다면 ::after를 사용할 필요 없다.

float 을 주면 block 성질로 바뀐다.

position

position: absolute;

: 절대 독립적인 배치가 이루어지는 층에 옮겨진다.

position: relative;

: 분신을 float 층에 자리를 차지하도록 둔 후 절대 독립적인 배치가 이루어지는 층에 존재하도록 한다.
( 움직이는 기준은 분신이 차지한 자리를 기준으로 움직인다. )

profile
🏃🏽 동적인 개발자

0개의 댓글