본문 왼쪽에 그림을 추가하는 방법 - CSS float

float은 코드를 복잡하게 만들기 때문에 사용을 지양해야 한다. 

그러나 책에서처럼 긴 문장의 왼쪽 위 구석에 그림을 추가하려면 사용할 수밖에 없다. 

이미지에 float: left;를 넣으면 다음에 오는 문장 왼쪽 위에 위치하게 된다.

 

 

<div class="image"></div>
<p>가나다라 마바사</p>

 

.image {
  width: 50px;
  height: 50px;
  background: deeppink;
  float: left;
}

 

 

다음에 오는 엘리먼트 중 하나에 clear: both;를 넣으면 해당 엘리먼트는 float에 영향을 받지 않는다. 

결과적으로 그림 아래쪽에 문자가 오게 된다.

 

<article class="wrap">
  <div class="image"></div>
  <p>가나다라 마바사</p>
  <p class="clear">아자차카 타파하</p>
</article>

 

.clear {
  clear: both; /* 또는 left */
}

 

 

float 속성을 주면 부모 엘리먼트가 해당 엘리먼트를 인식하지 못하기 때문에 자식으로 float을 적용한 그림만 있거나 자식 문장이 그림의 height보다 짧을 경우 부모의 height가 그림만큼 늘어나지 않는 문제가 발생한다.

이를 막기 위해서는 위에서 활용한 clear 속성을 가진 자식을 제일 끝에 추가해야 한다.

태그가 지저분해지기 때문에 ::after를 써서 부모의 제일 마지막 자식으로 오게 하고 다음 속성들을 넣는다.

 

.wrap::after {
  content: '';
  display: block;
  clear: both;
}