1. diplay 란?

display 는 각 태그들이 눈에 보이는 속성이 무엇인지를 알려주는 속성입니다.
대표적으로 inline, block, inline-block이 있습니다.

block

block 은 한영역을 차지하는 박스형태를 가지는 성질입니다. 그렇기 때문에 block의 width값은 100%가 됩니다. 그리고 라인이 새로 추가됩니다.

• block은 width 값과 height 값을 지정 할 수 있습니다.
• block은 margin 값과 padding값을 지정 할 수 있습니다.

inline

inline 은 주로 텍스트를 주입 할 때 사용 되는 형태입니다. 그렇기 때문에 기본적으로 block처럼 width값이 100%는 아니며 컨텐츠 영역 만큼 자동으로 잡히게 되며 라인은 새로 추가 되지 않습니다.

• inline은 width 값과 height 값을 명시 할 수 없습니다.
• margin 값은 위아래엔 적용 되지 않습니다.
• padding 값은 좌우는 공간과 시각적인 부분이 모두 적용 되지만 위아래는 시각적으로는 추가되지만 공간을 차지 하지 않습니다.

inline-block

inline-block 은 말그대로 inline의 특징과 block의 특징을 모두 가진 요소입니다.

• 줄바꿈이 이루어지지 않습니다.
• block 처럼 width 값과 height 값을 지정 할 수 있습니다.
• 만약 값을 지정하지 않을 경우 inline과 같이 컨텐츠만큼 영역이 잡힙니다.

2. float 이란?

float 은 페이지 전체적인 레이아웃을 정렬 할 수 있게끔 사용하는 속성입니다.

float 속성값

• none : 띄우지 않음(기본값)
• left : 왼쪽으로 띄움
• right : 오른쪽으로 띄움
• initial : 기본값으로 설정
• inherit : 부모 요소로부터 상속

clear 속성

float 속성을 사용하면 주변으로 컨텐츠가 흐르듯이 배치가 되는데 이를 해체하기 위해 clear 속성을 사용합니다. clear 속성이 지정된 영역 이후로는 float 속성은 작동하지 않습니다.

• none : 기본값
• left : float:left 속성을 해체함
• right : float:right 속성을 해체함
• both : left,right 속성을 둘다 해체함