float의 사전적인 의미는 '뜨다','떠돌다'입니다. CSS 에서 float을 사용하게 되면 가로로 배치하기 어려운 block 요소들을 가로로 배치 할 때 사용할 수 있습니다.
float을 사용하면 inline, inline-block, block 모두 block 속성으로 변합니다.
inline 속성인 span 태그를 사용하면 display 속성이 inline이 기본 값으로 주어집니다.
이때 float 속성을 사용하게 되면
display 속성이 block으로 변한것을 볼 수 있습니다. display 속성이 block으로 변하기 때문에 span태그에서도 width, height, top, bottom 등 높이를 나타내는 속성들을 사용 할 수 있습니다.
span 태그로 감싸고 있는 요소들에 float을 적용하고 margin-bottom:30px 의 값을 적용하자 bottom에 margin값이 30px 적용된 것을 볼 수 있습니다.
float과 block 의 차이점
1. display:block;인 부모 태그에 height 값을 주지 않으면 자식태그의 height의 합이 부모 태그의 height 값이 되지만 float에서는 이런 특징이 없습니다.
부모 태그인 parent에 height 값을 주지 않았지만 자식 태그인 child 3개의 height값인 600이 적용된 것을 볼 수 있습니다. 하지만 float을 사용하면 이런 특성이 사라집니다.
자식태그 중 하나인 red 태그에 float을 적용해주면 dispaly는 block이지만
부모의 height에서 red 태그의 height 높이가 빠진것을 볼 수 있습니다.
2. block은 남은 공간을 margin으로 채웁니다. 하지만 float을 사용하면 이러한 특성이 사라집니다.
block의 성격을 띄고있는 태그들은 위 빨간색 동그라미 처럼 남은 공간을 margin으로 채워놓고 있습니다.
하지만 float을 사용하면 이런 block의 특성이 사라집니다.
float 을 사용하자 위와 같이 margin이 사라지고 남은 공간에 다른 요소들이 채워지는 것을 볼 수 있습니다.
그렇다고 해서 margin의 값을 아예 줄 수 없는것은 아닙니다.
red 태그에 margin-right:30px; 의 값을 주자 빨간색으로 동그라미친 부분 만큼 margin 값이 들어간 것을 볼 수 있습니다.
위 두가지 속성을 요약하면 다음과 같습니다.
height이 각각 200px; 인 태그가 3개 있는 부모 태그의 height은 600입니다.
여기에 자식 태그들에게 float을 적용시켜 주게되면
margin이 사라지면서 부모 태그의 height 또한 0이 됩니다.
그리고 다른 요소들이 float이 적용된 요소를 인지 하지않고 아래로 들어간 모습을 확인할 수 있습니다.
block 속성 태그들은 float 속성을 가진 태그를 무시하지만 inline 속성을 가지고 있는 태그들은 float이 적용된 태그를 인지합니다.
부모 태그인 parent 태그 옆에 더미 텍스트로 이루어진 태그를 만들게 되면
다음과 같이 태그들이 쌓여있는 모습을 확인할 수 있습니다. 이때 부모 태그인 parent 태그 아래의 자식 태그들인 child 태그들에 float을 적용시키게 되면
block 속성의 요소들은 float이 적용된 요소들을 무시하지만 inline 속성을 가지고 있는 요소들이 적용된 텍스트들은 float을 인지하고 옆으로 피하는 것을 확인할 수 있습니다.
