● [CSS] - float
최근에는 잘 쓰이지 않지만 그래도 옛 웹브라우저에서는 쓰였던 속성들이기 때문에, 내가 어떤 브라우저들을 마주칠지 모르니 . . 공부해본다 . .
● float의 특징
- float는 붕뜨는 속성이 있다.
- 아래 파랑 <div>에 float 속성을 부여해보겠다.
위와 같이, float 속성을 부여하면 position: absolute; 처럼 기존 요소들의 흐름이 차례대로 다시 채워지고, 파랑 <div>는 공중에 띄워지게 된다. position과 다른 점이 있다면, 바로 위의 부모가 기준이 된다는 점이다. 즉, 같이 부모에 영향을 받지만, position은 static이 아닌 부모요소를 찾아가고 float은 바로 직속 부모를 찾아가게 된다.
- float끼리 정렬된다.
- 아래와 같이 빨강 <div>에도 float: left를 주었다.
갑자기 float된 애들끼리 정렬이 된다. 이거보자마자 그냥 flex가 최고라는 걸 느낄 수 있다. . 굳이 저렇게 가로 정렬할걸 띄워서 할 필욘 업우니까 . .
- inline 요소에 float 속성을 먹여주면 갑자기 block이 된다.
- 아래와 같이 inline요소에 float을 넣어주니, 갑자기 width와 height 속성이 먹여진다.
- 띄워진 float들은 html에 입력된 순으로 순서를 가진다.
- html에는 파랑 > 빨강 > 초록 순으로 적혀있다.
- 마구잡이로 float left right를 넣어주었는데, 결국 html에 적힌 순대로 정렬이된다.
- 즉, float: left 왼쪽끼리는 왼쪽끼리 정렬 / float: right 오른쪽은 오른쪽끼리 정렬된다는 말이다.
- float 아래에 껴있는 것들은 float 해제를 시켜주어야한다.
- position 같은 경우 저절로 흐름에서 제거가 되고, 흐름이 알아서 정렬되고.. 부모의 지역이나 뷰포트에 맞게 움직여줄 수 있었는데 얘는 귀찮게 내가 요소흐름도 정렬해주어야한다는 소리다.
- 회색 <div>에 clear: both; 속성을 먹여주니 정렬이 되었다.
