22-04-20 float

float가 되면, 부모는 float가 된 자식을 집 나간 붕 뜬 자식으로 여김.(height에서 배제)

형제요소들도 집 나간 자식으로 여기고 그 자리를 차지.

부모의 크기를 기준으로 left와 right정렬이 된다.

float: left 이미지가 왼쪽, 텍스트가 이미지를 감싸면서 배치

float: center 이미지가 중간

float: right 이미지가 오른쪽

블록으로 신분 상승. inline, inline block, block → block(width,height, padding-top, padding-bottom, border-top, border-bottom, margin-top, margin-bottom 사용가능)

블록인데 길막을 못한다.(width를 지정하지 않아도 부모의 width를 100% 채우지 않고, 실제 컨텐츠 길이만큼 width가 정해져 붕뜬다. width를 지정해도, 자동으로 생기는 margin auto가 생기지 않는다)

텍스트나 이미지 같은 inline성격을 지닌 요소들은 집나간 float의 존재를 알고, 피해간다.

---

How to fix

1. overflow: hidden;

   부모에게 overflow: hidden;을 주면 부모가 집나간 자식을 찾는다.

2. clearfix

   clear: left;를 가진 요소는 앞에서 float: left된 요소의 위치를 찾을 수 있어서 피한다.

   left | right | both

   Pseudo-Element 이용 가상요소를 만들어서, 이 요소에 clear를 적용

   가상요소는 각 요소당 2개씩 만들 수 있다.

   ::before(가장 먼저 나오는 요소 추가), ::after(가장 마지막 요소 추가)

   가상요소를 사용할 때 반드시 작성해야 할 property: content

   .parent::after {

   content: “”;

   display: block; (clear은 display가 block인 요소한테만 사용할 수 있다.)

   clear: left;

}