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
}