float - block요소들을 가로배치 할때 사용한다.
- float를 사용하면 어떤 일들이 일어나는가?
- 그것으로 인해 망가진 레이아웃을 어떻게 수정하는가?
float: 뭔가 떠다닌다는 의미
어떤 요소가 float가 된다면 부모가 이를 집나간 자식마냥 여기게 된다.
block에서, 따로 부모의 height값을 선언하지 않을 경우, 자식 요소의 height의 합이 부모의 height가 된다고 배웠다.
따라서 원래 요소가 float가 되어 붕 뜨면 이를 빈공간으로 인지하게 되고, 나머지 형제요소들이 앞으로 나가며 부모 요소의 자리도 그만큼 줄어든다.
요소를 float시키면 원래 inline이든, inline-block이었든 간에 block 신분이 된다! -> 따라서 block의 속성들을 가질 수 있게 됨
but! block이긴 block인데 원래처럼 길막을 못함.
(원래 block은 따로 width가 선언되지 않을경우 부모 content-box의 width로 설정됨
따로 width를 선언했다면, 남은 공간은 margin으로 자동으로 채운다고 배웠다)
대신, 실제 컨텐츠만큼의 width를 가지게 된다.
그리고 남은 공간을 margin으로 자동으로 채우는 일도 없게 된다.(margin을 줄 수 없다는건 아님)
만약 자식 요소들이 다 float된다면? 부모 입장에서 영역을 다 잃게되는것
float-left/right: 자신이 갈 수 있는 공간에서의 최선의 왼쪽/오른쪽으로 이동
텍스트는 float된 존재들을 의식하고 이를 피해가는 모습을 볼 수 있다 (레이아웃 와장창)
예시 :
위와같은 불편함 때문에 요새는 float를 잘 안쓴다고는 한다..그래도 알아서 나쁠건 없으니!
