1. display

• 요소의 렌더링 박스 유형을 결정하는 속성

기본값 : - (요소마다 다름)

display: value;

인라인의 경우 개행이나 공백은 약 4px의 여백을 가진다.
인라인블록은 인라인의 배치를 가지지만 성질은 블록을 따른다

display	width	height	margin	padding	border
block	O	O	O	O	O
inline	X	X	좌/우	좌/우	좌/우
inline-block	O	O	O	O	O

※ inline 요소의 padding/border 속성이 좌/우 만 적용 된다고 표시한 이유

실제로 inline 요소의 padding/border는 좌/우뿐만 아니라 상/하에도 적용이 된다.

• parent 는 div , child 는 span

하지만! 상/하 padding/border는 line-box에는 영향을 주지 못하기 때문에 위와 같이 부모 요소의 박스에 반영되지 않는다.

또한 인접한 다른 line-box 에도 반영되지 않는다. 즉 콘텐츠가 겹칠 수 있기 때문에 실무에서는 잘 사용하지 않는다.

---

2. visibility

• 가시성 제어

기본 값 : visible

visibility: visible;  /* 보임 기본값 */
visibility: hidden;  /* 숨김, 자신의 박스 영역은 유지(margin까지 모두 포함) */
visibility: collapse; /* 셀간의 경계를 무시하고 숨김(박스영역 없음, 테이블의 행과 열 요소에만 지정 가능, 그 외 요소 지정은 hidden과 같음) */

※ display: none과 차이점

display: none: 요소가 렌더링 되지 않음(DOM에 존재하지 않음)
visibility: hidden: 요소가 보이지는 않지만 렌더링 되며 화면에 공간을 가지고 있음(DOM에 존재함)

---

3. float

• 모든 요소는 기본적으로 보통의 흐름에 따라 위 -> 아래로, 그리고 좌 -> 우로 배치된다.

요소 박스의 경계대로 차례대로 배치되며 float 속성은 요소를 보통의 흐름에서 벗어나

독자적인 공간 위에 배치되게 된다.

• 요소를 float(요소를 보통의 흐름에서 벗어나게 함) 시킬지 지정하는 속성

기본 값 : none

float: none;
float: left;
float: right;

대부분 요소의 display 값을 block으로 변경함 (display 값 변경 예외: inline-table, flex 등)

• display inline 형식을 float 시키면 자동으로 block으로 변경된다.

---

4. clear

• 요소를 floating 된 요소의 영향에서 벗어나게 하는 속성
• float를 선언하면 의도하지 않게 주변요소에게 영향을 주므로 clear를 선언해주는 것이 좋다.

기본 값 : none

clear: none;  /*양쪽으로 floating 요소를 허용(기본값)*/
clear: left;  /*왼쪽으로 floating 요소를 허용하지 않음*/
clear: right;  /*오른쪽으로 floating 요소를 허용하지 않음*/
clear: both;  /*양쪽으로 floating 요소를 허용하지 않음*/

주의! block-level 요소만 적용 가능

display:block; claear:both; 가 많이 쓰인다고 본다.