Float (1)

◆ float는 기본적으로 가로배치가 된다.

 

◆ float는 요소가 위로 붕 떠버리는 것이다. 이렇게 되면 없는 요소로 취급된다.

 

 

◆ 원래 따로 width를 지정하지 않으면 부모의 height는 자식요소의 height의 합으로 이루어진다고 했다.

float 되어 붕 떠버리게 되면 없는 요소가 되기 때문에 뒤따라 있던 자식요소가 그 빈 공간을 채우게 되고 부모의 높이도 그만큼 줄어들게 된다.

 

 

 

 

 

◆ 어떤 요소에 float가 적용되면 그 요소는 block이 된다. 그러나, 길막을 하지 못하는 block이 된다. 그말인 즉슨,

 

① width가 지정되지 않은 경우, 자신이 가지고 있는 컨텐츠의 크기만큼만 공간을 차지하게 된다.

진짜 block처럼 전체를 길막하지 않는다.

 

② 진짜 block은 남은 공간을 마진으로 채우지만,

길막을 못하는 block인 float는 마진이 생긴 자리에 뒤따라오는 float가 된 자식요소들이 자리를 차지하게 된다.

 

모든 요소가 float 되었는데 부모의 공간이 제한되어있거나 이미 다른 요소들이 차지하고 있다면 이 요소는 다음 줄로 이동된다.

이것은 부모의 height가 0이 된다는 뜻이다. 그냥 없어진 것이다.

 

 

 

 

 

◆ 부모요소가 없어졌기 때문에 블록의 성격을 가진 요소들이 오면 float된 요소들을 무시하고 그냥 공간을 차지할 것이다.

반면, 텍스트나 이미지 같은 인라인의 성격을 가진 요소들은 float된 요소들을 없는 취급하지 않고 존재의 영향을 그대로 받게 된다.

그래서 레이아웃이 무너진다.