[CSS] float자식을 둔 부모 오브젝트의 Height에 대한 고찰..

참고 URL 

http://naradesign.net/wp/2008/05/27/144/

http://div.or.kr/css-studying/after%20%EA%B0%80%EC%83%81%20%EC%84%A0%ED%83%9D%EC%9E%90

---

float을 하면 흔히 '띄워 준다' 고 한다.

이 의미가 뭔지 잘 몰랐었다. 근데.. 

어떤 오브젝트에 float 속성을 부여하게 되면, 그 오브젝트는 float끼리만 영향을 준다.

부모의 속성이 height : auto이고 float 속성이 없다면, 자식의 높이를 몰라 감싸지 못한다..

하나의 방법은 부모 속성에 float : left를 해 다같이 float이 되어버리자는 것이다.

하지만 이 방법은 부모의 부모, 그 부모 조상님까지 하.. 전부 다 float이 되어야 한다는 것...

또 하나의 방법은

overflow 속성을 잘 이용하는 것이다.

visible : 부모가 크기가 몇이건 무시하고 일단 나만 보이게 하자. (부모는 여전히 자식 크기를 모름)

hidden : 걍 보이는 부분까지만 보여주고 짤리는 부분은 보여주지 말자. (짤리는 부분을 제외한 크기를 부모가 알게 됨)

이런 것인데..

부모의 height이 auto인 경우, visible을 적용시키면 부모는 여전히 이놈의 크기는 모른다. 그래서 부모의 크기는 미동도 하지 않는다. 모르니까!!

근데 한번 hidden을 해봤는데, 부모의 크기가 정해져 있다면 그냥 짤리지만, 

auto로 해서인지 짤리는 부분이 없이 전부 다 표시해 주는 것이다...

css 문서를 봐도 이런 내용은 알아서 생각해야 하는 것 같다..

다른 방법으로는 ::after를 사용하는 것이다. 나도... 이 방법이 가장 깔끔한 듯 싶다.

이 키워드는 오브젝트 내용의 끝 부분에 지정한 오브젝트(자식 오브젝트임)를 하나 만들어 주는 것이다.

이는 컨테이너 요소 안 맨 마지막에 추가시킬 태그를 지정할 수 있다.

부모id(혹은class):after {

  content : "";

  display : block;

  clear : both;

}

이렇게 해 놓으면, 자식이 float이라도 상관없다.

끝 위치에 빈 문자열을 넣고 clear:both를 해서 같은급에 속한 오브젝트들의 float속성을 마치 없는 것처럼 취급한다.

그러니까, 

1. clear를 시켜서 float 속성이 없는 것처럼 취급하고,

2. 빈 내용을 생성하는데(내용이 없으면 아무것도 생성되지 않음)

3. display:block 속성을 가져서 한 줄짜리 빈 내용이 생성된다.

만약 display:block을 안하고 inline속성을 띄게 되면 빈 문자열 ""을 하단이 아니라 옆에 생성한다. 

하지만 block이라면 한 줄 전체를 차지하게 되니까 정말 맨 아래 한 줄을 생성하게 된다.

float을 사용하게 되면 부모'만' float의 높이를 인지하지 못한다. 

이 방법은 부모에게 float 오브젝트의 높이를 알려주는 방법이다.

(부모 -> 자식-> 막내자식 -> 부모 | 막내자식이 알려주는..?)

만약 absolute라면 동급인 애들도 absolute를 인지하지 못하기 때문에, 불가능하지 않을까?