HTML/CSS - float

안녕하세요, 오늘은 float에 대해 정리해보겠습니다.

 

 float이란 한 요소(element)가 보통 흐름(normal flow)으로부터 빠져 텍스트 및 인라인(inline) 요소가 그 주위를 감싸는 자기 컨테이너의 좌우측을 따라 배치되어야 함을 지정합니다. (MDM 검색 결과)

즉, float는 요소를 좌우 방향으로 띄우는 속성으로 수평 정렬에 사용을 할 수 있습니다. 비록 최근에는 flex 속성이 나와서 float의 사용 빈도는 줄었지만 정리해보겠습니다. 이해하기 쉽게 하기 위해 실제 코드로 정리하겠습니다.

<!-- HTML -->

<article>
  <div class="picture"></div>
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
  Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
  when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
  It has survived not only five centuries, but also the leap into electronic typesetting, 
  remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets
  containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker
  including versions of Lorem Ipsum.
</article>

<!-- CSS -->
article .picture {
  width: 200px;
  height: 150px;
  background: green;
}

위와 같이 코드를 짜게 되면 아래와 같은 결과가 나오게됩니다.

여기서 float를 사용하면 신문에 나오는 것처럼 그림 옆으로 글이 자연스럽게 흐르게 됩니다. 아래 코드 및 결과를 참고하시면 쉽게 이해가 갈 것 같습니다.

<!-- CSS -->
article .picture {
  width: 200px;
  height: 150px;
  background: green;
  float: left;
  margin-right: 20px;
  margin-bottom: 10px;
}

float 속성 적용 시

margin까지 적용 시

여기서 float를 해제하는 태그인 clear까지 확인해 보겠습니다. 위의 글에서 3번째 줄(It was popularised~)부터는 float에 영향을 안 받고 왼쪽에서부터 다시 시작하게 만들어 보겠습니다. 3번째 줄부터 div태그로 묶어서 clear를 적용하고 안 하고를 비교하겠습니다. (코드는 페이지 양이 많아지므로 clear: left; 를 작성한 것만 추가하고 이미지로 구분하겠습니다)

<!-- HTML -->
<article>
  <div class="picture"></div>
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. 
  <div class="clear">
    It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  </div>
</article>

<!-- CSS -->
article .picture {
  width: 200px;
  height: 150px;
  background: green;
  float: left;
  margin-right: 20px;
  margin-bottom: 10px;
}

article .clear {
  clear: left;
}

div태그만 적용하여 다음 줄로 넘어간 상태

clear: left; 까지 적용하여 float를 거슬러서 왼쪽부터 다시 시작

위의 이미지에서 확인되듯이 clear: left;를 적용하면 float 속성을 거슬러 왼쪽부터 다시 시작하게 됩니다.

 

이제 float로 수평 정렬하는 법을 정리하겠습니다. 먼저 div를 이용하여 box를 3개 만들어보면 div태그는 block 속성을 가지기 때문에 3개의 box가 수직으로 정렬된 것을 확인할 수 있습니다.

여기에 float 속성을 추가하게 되면 수평으로 정렬이 되게 됩니다. (float: right;를 적용하면 1-2-3 순서가 아닌 3-2-1로 정렬이 됩니다!)

float: left; 적용 시

float: right; 적용 시

지금까지 float의 정렬에 대해 다루었는데요, 여기서 문제점이 발생하게 됩니다. 위의 3개 box를 수평 정렬한 후 새롭게 하나의 박스를 만들면 겹치지 않고 밑에 만들어지는 것을 생각하고 있었는데, 새로 생기는 박스가 기존의 박스들과 겹치게 생성되는 것을 확인할 수 있습니다.

이러한 문제를 해결하기 위해 존재하는 것이 위에서 사용하였던 clear 속성입니다. float를 적용하던 요소들을 사용한 후에 float를 해제하고 싶은 요소에 clear를 사용하면 그 요소 이후부터 float가 해제가 됩니다. 이해하기 쉽도로 아래 코드 및 이미지를 확인해 주세요.

<!-- HTML -->
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box4">4</div>
<div class="box5">5</div>

<!-- CSS -->
.box {
  width: 100px;
  height: 100px;
  background: tomato;
  font-size: 30px;
  margin: 10px;
  float: left;
}

.box4 {
  font-size: 30px;
  width: 150px;
  height: 150px;
  background: orange;
  clear: left;
}

.box5 {
  font-size: 30px;
  width: 150px;
  height: 150px;
  background: blue;
}

4번 box 요소부터 float가 해제됨

즉, float를 사용할 때는 꼭 clear를 이용해서 해제를 해주어야 합니다. 여기서 clear의 값으로는 float와 동일한 값을 적용해 주어야합니다. float가 right 였으면 clear도 right를 사용하고, float가 left면 clear도 left를 사용해주어야 합니다. 이런 생각을 안 하도록 양쪽 다 해제할 수 있는 편한 값이 있는데요 바로 both를 적용하는 것입니다.

 

float의 해제는 중요하므로 정리해두습니다.

◆float 해제 : float 속성이 적용된 요소의 주위로 다른 요소들이 흐르게 되므로 이를 방지하기 위해 속성을 '해제'해야 함!

1. 다음 형제 요소에 clear: (left, right, both) 사용 : 위의 예제

2. 부모 요소에 overflow 속성 이용 : 비추천!

3. 부모요소에 미리 지정된 clearfix 클래스를 추가

 

3번 방식이 추천되는 방식으로 코드를 보며 살펴보겠습니다.

<!-- HTML -->
<div class="clearfix">
  <div class="float-box">1</div>
  <div class="float-box">2</div>
  <div class="float-box">3</div>
  <div class="float-box">4</div>
</div>
<div class="new-box"></div>

<!-- CSS -->
.clearfix::after {
  content: "";
  clear: both;
  display: block;
}

.float-box {
  width: 100px;
  height: 100px;
  background: orange;
  margin: 10px;
  float: left;
}

.new-box {
  width: 200px;
  height: 200px;
  background: skyblue;
}

 

위의 코드의 결과 값

여기서 clearfix 쪽 코드를 한번 살펴보겠습니다.

.clearfix::after {
  content: "";
  clear: both;
  display: block;
}

 

먼저 ::after는 이전에 배웠던 가상 요소 선택자로 적용을 함으로써 4번 박스 뒤에 content, clear, display 속성들이 적용되게 됩니다. content는 가상 요소 선택자에서 필수 값이기 때문에 빈칸("")으로 적용하였고, clear: both;를 사용함으로써 clearfix클래스의 끝인 4번 박스 뒤에 clear:both가 적용이 되어 float가 해제됩니다. 가상 요소 선택자(after, before)들은 inline 속성을 가지고 있기 때문에 display: block;를 사용하여 줄 바꿈을 해줍니다.

 

주의할 점으로 clearfix 클래스 내부에는 무. 조. 건 float 속성이 사용되는 요소들만 있어야 합니다!

+) float 속성을 적용하면 대부분의 display 속성이 block으로 변화합니다! (예외: flex / inline-flex)

 

홈페이지를 만드는 중인데 여러 요소들의 배치가 머리를 아프게 하고 있었습니다. float를 정리함으로써 조금 더 편하고 이쁘게 홈페이지를 만들 수 있게 되길...ㅎㅎ 물론 flex를 배우면 훠어어어얼씬 쉬워진다고 해서 빨리 배우고 싶네요^_^