CSS float

Float

  ① 집 나간 내 content 못찾음 

  ② block으로 신분 상승

  ③ 길막 못하는 block

 

 · 부모요소의 height는 자식요소의 height의 합인데 float 하게되면 부모의 height마저 줄게 됨

        = position:absolute; 일때랑 동일 

 · flaot 주면 모두 block 성격으로 바뀜 

        = position:absolute; 일때랑 동일 

 · 하지만 길막 못하는 block가 됨

     -> float되면 box크기 제외하고 남는 공간 margin으로 채워지지 않는다.

             ex)부모 크기가 1000px, box 크기가 500px 이여도  margin 500은 생기지 않는다 

        & 부모의 width 계승받지 않는다.

 

 

width : 450px;

 

    box1에 opacity:0; 주면 box3이 숨어있음  (근데 BOX3 이란 글자가 안따라감; 질문)

width : 600px;

 

 

자식요소가 모두 float 되면 부모요소 영역은 0이 돼버려서 다음에 오는 요소들은 멘붕

 

float를 fix하는법 알아야함

  ① overflow:hidden  overflow:hidden을 부모에 주면 집나간 박스 찾음

  ② clear : left or right or both      clear는 float를 위해 생김

               float 요소가 끝난 후 clear 속성을 사용함

               clear은 block요소만 사용할 수 있음! 

width : 600px;

+ 바로 다음에 가상요소 만들어서 clear 시켜줄 수 도 있음