모든 웹사이트를 구성하는 요소는 BOX 형태로 되어있고, 이를 어떻게 레이아웃시키냐는 정말 중요하다.

이런 레이아웃의 작은 단위인 BOX는 각종 태그들로 만들어니다. 그 중 널리 사용되는 것이 <div>태그이며 class나 id 즉, 이름을 부여한다.

CSS를 통해 BOX 요소들을 기획한 레이아웃에 위치시킨다. 요즘에는 flex를 많이 쓰지만, 예전에는 float를 많이 사용했기 때문에 float를 배워봐야한다고 한다.

float

float는 주로 이미지 주변에 텍스트를 감싸기 위해 만들어진 프로퍼티이다.

* {
  box-sizing: border-box;
}

.img {
  float: left;
}

이렇게 하면 이미지가 왼쪽에 나머지 text가 오른쪽에 위치한다.

tip) box-sizing: border-box를 한 이유는 width와 height 속성이 안쪽 여백과 테두리는 포함이고, 바깥 여백은 포함하지 않게 만들기 위해서이다.

float는 큰 단점을 하나 가지고 있는데, 그것은 부모가 float 속성을 가진 요소의 높이를 인지할 수 없다는 것이다. 따라서 부모요소의 높이를 벗어난다.

이를 해결하기 위해서는 여러가지 방법이 있는데 나는 그 중 많이 사용한다는 부모요소에 overflow 속성을 사용하는 방법에 대해 알아보고자 한다.

float 문제 해결방법

1) overflow

float 속성을 가진 부모 요소에 overflow: hidden 또는 overflow: auto를 적용시켜주면 된다.

overflow: hidden사용 시 자식 부분 중 넘치는 부분이 잘리기 때문에 사용하지 않는 것이 좋다.overflow: auto` 사용 시 자식의 너비가 부모의 너비보다 크면 스크롤 바가 생긴다.

2) 가상요소 ::after 사용

가상요소 ::after은 float 속성을 적용한 요소의 부모요소에 사용해주면 된다.

* {
  box-sizing: border-box;
}

div::after {
  display: block;
  content: '';
  clear: both;
}

.img {
  float: left;
}

해당 내용은 div 태그 뒤에 빈 블럭을 만들고, float(left, right)를 초기화 시키겠다는 뜻이다.

div뒤에 다른 내용을 작성하면, 위로 올라가지 않고 div태그 뒤에 위치하게 된다.