float과 가상선택자(::after, ::before)

float과 가상선택자 ::after, ::before의 개념 이해하기 🙌

float

float의 사전적 의미는 '붕 뜨다, 부유하다' 이다.
직계자식 중 하나의 이미지를 float 시키면 붕 떠서 좌 또는 우로 붙는 것.
여기서 이미지는 부모에게 없는 자식 취급을 받으며 뒤따르는 다른 자식들이 빈 자리를 채우게 되는데, 이 때 이미지를 텍스트가 감싸는 형태를 만들어주는 게 float이다.

• float:right / float:left
  • float된 이미지는 block 속성을 갖게 되어 너비와 높이값을 줄 수 있게 되고, 값을 지정하지 않을 경우엔 컨텐츠 크기만큼 영역을 갖는다.
  • CSS3 이전에는 수평정렬하는 속성으로 더 많이 사용되었지만, CSS3 이후에는 flex가 추가되어 더 이상 수평정렬에 float을 사용하지 않게 되었다.

위 사진처럼 float을 지정하는 순간 해당 부모 안에 있는 레이아웃이 무너지고, 자식들이 집을 나가는 사태가 발생한다. 해결 방안👇

• overflow:hidden (부모 "자식들 다 집으로 돌아와~")
  - float이 적용된 태그 부모에게 적용하여 집 나간 자식을 찾아오는 속성.
  • 부모 태그 요소에 width 또는 height 값을 정의하지 않는 한, overflow 되었던 자식 요소를 모두 표시하기 위해 부모 자신의 크기를 자동으로 조정하여 자식을 부모 영역 안에 집어넣는다.
    (먄약 width,height 값이 지정되었다면 자식 태그 요소의 일부분이 보이지 않게 된다.)

• clear:both (형제 "나는 나의 길을 가겠어!")
  - clear는 float으로 인해 망가진 레이아웃을 위해 만들어진 태그이다.
  - 다른 형제들이 float이 적용된 태그에 영향을 받지 않도록 한다.
  - 적용은 영향을 받고있는 형제 태그에!

  [ 두 가지 적용 방법 ]

  1. HTML에서 clear할 지점에 <div class="clear"></div>를 추가한 후,
     CSS에 .clear{ clear:both; } 를 작성한다.
     - 클래스 이름은 마음대로지만 가독성을 위해!
  2. 실제 clear를 적용할 이전 태그에 가상선택자 after를 붙여 속성을 적용한다. 참고👇

가상선택자 :after, :before

가상선택자는 가상요소로써 마치 콘텐츠가 추가된 것처럼 행동한다.
"clear:both" 속성을 적용할 형제태그에 p::after 이런 식으로 붙여 사용한다.

• ::before - 요소 시작 전
• ::after - 요소 끝난 후

참고로 after, before 는 content:''; 가 필수로 따라오며,
인라인요소이기 때문에 display:block; 이 필요하다.

    p::after{
        display:block;
        clear:both;
        content:'';   //가상 콘텐츠 추가~!
      }

>> HTML에 빈 태그를 만들지 않아도 되어서 좋다!!
>> 검색엔진에는 반영 안됨.