Float

드디어 floats/flexbox 그리고 CSS grid 배우는 섹션 4에 들어갔다!
재밌었던게

h1 {
  float: left;
}

nav {
  float: right;
}

이렇게 해줬더니 컨테이너가 붕괴? 되는 형상이 있었는데
그걸 height collapsing이라고 한다고 한다..ㅎㅎㅎ
저렇게 플로트로 해주면 height 인식을 0으로 하더군...?
다음 강의를 보니 child elements가 float되면
parent element에 이런 붕괴현상이 일어난다.
이걸 해결해주는 방법은 clear float하는건데
index에

<div class = "clear"></div>

이렇게 해주고, left와 right둘다 플로트 해줬었기 때문에
css에

.clear {
  clear: both;
}

이렇게 해주면 클리어 됨...

그런데 이렇게 하려면 div로 항상 빈 element만들어주고
클리어 해줘야 해서 매우 outdated한 방법이라고 함...

이런 empty element계속 만들어주는거 보완하기 위해
clearfix hack이라는게 생겼다고 한다.
이건 그 collapse가 생기는 parent element에 클래스를

<header class="main-header clearfix">

이렇게 clearfix로 지정해주고

css부분에

.clearfix::after {
  clear: both;
  content: "";
  display: block;
}

이렇게 psuedo를 사용해준다.
저렇게 after하면 맨끝에 이게 붙는다는 뜻인걸 저번에 배웠었다.
display:block;해주는 이유는 기본적으로 psuedo는 inline element인데
저렇게 float클리어하는건 block일때만 가능하다고 한다.

article {
  width: 825px;
  float: left;
}

aside {
  width: 300px;
  float: right;
}

footer {
  clear: both;
}

이런식으로 써서 footer에 float적용된걸 clear할 수 있다.

float가 abosulte positioning과 다른점

absoulte positioning얘는 overlap되서 다른 텍스트나 인라인 엘레먼트 위에
떡하니 붙어있을때도 있고 그런데,ㅡ
floats는

text and inline elements will wrap around the floated elements. ...
그니까 얘는 위에 overlap되지않고 다른애들이 주변에 위치함...
그리고 아까 height 붕괴?현상 말했듯이

The container will not adjust its height to the element 이다..ㅎㅎ