float

float
   A. float를 적용한 요소는 부모 요소의 공중으로 간다!
         1. float가 적용된 요소는 부모 요소의 공중으로 감
         2. 떠올라서 생긴 빈 부분을 메꾸기 위해 다른 형제 요소가 이동
             - 타 요소가 이동해서 생긴 빈 요소는 사라짐

             - 즉, 두 요소에 대해 float : left를 적용시키면 제일 위 요소부터 차례대로 왼쪽 위로 간다.
             

   B. 요소에 float를 적용시키면 그 요소는 block으로 적용됨
        - 즉, float이 적용된 요소에는 width, height 적용 가능
        - 개발자 도구의 style -> box model 아래의 필터에서 display 검색
        cf> float으로 block 요소가 된 경우에는 
              width=부모 요소의 width의 100% 가 적용되지 않음

 

 

적용 방법

  

.user-image, .card-content{
     float:left;
     }  // 위 두 클래스를 가지고 있는 요소들은 float left가 적용됨

   

  overflow : hidden
       - 자식 요소가 float할 때, 부모 요소에 입력하면
         부모 요소가 자식을 인식함

   clear : left / right/ both
        - 특정 요소 위에 float left/right/both가 된 요소가 있다면
           그 요소를 인식하게 함  
        -  block element인 요소에만 사용 가능(따라서 inline, inline block인 요소에는 display:block 넣어주기!)

    css의 pseudo element 만들기(실제 html에서는 존재 X)
         -  각 요소당 2개 만들 수 있음(::before, ::after)
                 - before는 특정 요소의 앞, after은 특정 요소의 뒤에 적용

          - ex).class::before{ 
                      content : ' '; // 가상 요소를 만들 시 필수 작성해야!

                      display:block;

                      clear:left;
                      ....}

   float는 현재 많이 쓰이는 요소는 아니지만, 과거에 작성된 코드를 만지게 될 일도 있을 것이므로,

  알아둬서는 나쁠 것 없다!