display vs float

css를 사용하다보면 정렬을 할 때 무엇을 써야할지 고민을 할 때가 있다. display의 경우 하단에 맞춰들어가고 이미 기본 css가 정의되어 있기 때문에 float를 더 권장한다. float의 경우 사용이 끝나면 clear:both혹은 clear : right 혹은 clear:left를 해줘야 한다.

display는 기본적으로 공간이 생성된다.

style에 기본적으로 마진값이 들어 있기 때문에 이를 없애고 싶으면 margin 값을 음수로 줘야 한다.

 

이게 싫다면 float를 줘야 한다. 또 다른 차이를 볼 수 있는 방법은 overflow가 발생했을 때다.

float의 경우는 그냥 다닥다닥 마진 없이 붙는다 이 둘의 차이는 이쯤에서 끝내기로 하고 overflow로 넘어가겠다.

overflow 발생 시 display와 float의 차이

display를 주게 되면 하나씩 모양이 튀어나오는데 하단에 맞춰서 정렬하기 때문이다. 이런 경우 float를 사용해서 정렬해야 한다.