display와 float의 차이

Navigation bar에서 설명했듯 display: inline-block; 과 float: left;는 비슷한 효과를 보여준다. 

이번 편에서는 그 차이에 대해서 정확하게 알아보도록 하자.

 

아래 코드와 그 결과를 보도록 하자.

 

 

See the Pen PoweLvv by Catnap421 (@catnap421) on CodePen.

 

 

float의 경우, p태그의 내용이 박스 옆에 오고, display의 경우, 아래에 오는 걸 확인할 수 있다. 즉 하단에 다른 태그를 입력하면 그 결과를 쉽게 확인할 수 있다.

 

float의 경우, 해당 요소의 크기만큼 할당해서 바짝 붙이기 때문에 box 요소가 float 되고 난 후, 남은 공간에 p요소가 오게 된다. 그러나 display의 경우, display: inline-block; 프로퍼티를 가진 요소들을 한 행에서 처리하고, 나머지 공간이 있다 하더라도, 그다음 요소가 display: block; 이면 다음 행에 나타나게 된다.

 

즉 앞으로 float와 display를 사용할 때엔 해당 프로퍼티를 가진 요소 하단에 다른 태그가 있을 때 어떻게 동작시킬지를 고민하여 사용해야겠다.