CSS : float, block, inline, inline-block

block 요소 => 길막 한다 witdh 값을 정해도 나머지 값을 전부 margin으로 채운다.
margin-left : auto 로 하면 좌측으로 margin을 채운다.
margin-right : auto 로 하면 우측으로 margin을 채운다.
즉 margin : 0 auto 하면 가운데 정렬이 됨.
따로 부모의 height를 선언하지 않았을 때, 자식 요소의 height의 합 = 부모의 height

inline 요소(img, span, a, strong 등)에는 흐름에 방해(padding-top, padding-bottom, width, height, border-top, border-bottom, margin-top, margin-bottom)되는 기본 box 요소를 사용 할 수 없음

inline-block 요소 => inline 처럼 흐르지만 block의 요소를 사용 할 수 있음

Float (물 위나 공중에서 떠돌다) 가로배치하기위해(많이 안씀)
: block 박스 요소로 변경됨(근데 길막을 못함)
: float가 되면 공간을 차지하기위한 자동으로 margin이 안생김

사용하면 : 레이아웃이 망가짐

레이아웃 망가진거 고치려면

방법1) float된 자식의 부모에게 overflow:hidden을 주면 float된 자식을 찾을 수 있음

방법2) float된 자식을 찾기 위해 (Block(div) 임의의 요소를 만들어서 찾기)

Block에 clear:left를 주면 float: left된 것을 인지하여 아래로 내려감

방법3) 방법2와 같은 HTML에 임의의 요소를 만들지 말고 CSS로 만듬 🙌

가상요소로 만들면 부모의 높이를 확인할 수 있어 레이아웃이 다시 복구된다.

CSS로 가상 요소만들기
::before 첫번째에 생김
::after 마지막에 생김

block 박스 만들기
.parent::after {
  content: "";
  display: block;
  clear: left;
}
⭐️ 자주 사용하는 클래스 만들어둠
.clearFloat::after {
	content: '';
    display: block;
    clear: left, both, right
}