10. Float

1. float 의미 2. 기본 개념 3. 블록 속성 태그 vs float 속성 태그 4. float:left, float:right 5. float 속성의 문제점

1. float 의미

float은 '띄우다'라는 뜻을 가지고 있으며 float 정렬은 다양한 객체를 띄워서 정렬을 하는 속성을 가집니다.

2. 기본 개념

원래 float 속성은 아래 사진처럼 그림을 따라 흐르는 텍스트 레이아웃을 웹에서 구현하기 위해 탄생한 속성입니다.


<img src="https://t1.daumcdn.net/cfile/tistory/235B2F485958F12129" alt="">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla, ad, autem quaerat sed impedit cupiditate tenetur recusandae facere, alias ab nihil nisi eligendi eaque ea molestiae dolore accusantium repellat maiores?


img {
  width:200px;
  float:left;
}

하지만 왼쪽 혹은 오른쪽으로 정렬이 되는 특성 덕분에 현재는 <div>, <p>, <table>과 같은 블록 속성을 가진 객체를 정렬하는 가장 기본적인 방법으로 사용되고 있습니다. float 정렬은 크게 두 가지 속성이 있습니다. 좌측 정렬, 우측 정렬이 있으며 중앙 정렬은 없습니다. 하지만 불가능한 것은 아닙니다. margin 속성을 이용해서 할 수 있으며 좌측, 우측 정렬을 설명한 후에 예제를 통해 보여드리겠습니다.

3. 블록 속성 태그 vs float 속성 태그

float 정렬의 예시를 보여드리기 이전에 블록 속성 태그의 성질과 float 속성의 성질에 대해 설명드리겠습니다.

블록 속성 태그는 아래와 같이 가로폭 전체의 넓이를 가지는 속성을 가지고 있습니다.

1번째에 float:left 속성을 준 그림은 다음과 같습니다.

위 그림과 다른 점이 보이십니까? float 속성을 주면 '1번째'에 해당하는 공간만큼만 차지하고 다른 요소에 대해서 왼쪽으로 배치됩니다. 오른쪽에 대해서도 동일하게 적용됩니다.

4. `float:left`, `float:right`

지금부터는 좌측, 우측 정렬에 대해서 설명드리겠습니다. 먼저 좌측 정렬에 대한 설명입니다. 위 예제에서도 보다시피 float:left의 성질은 블록 박스에 해당하는 만큼의 공간만 차지하고 나머지 내용은 박스 오른쪽에 위치하며 위에서 아래의 방향의 흐름을 가집니다.


<!doctype html>
<html>
<head>
  <style>
    img{
      width:300px;
      float:left;
    }

  </style>
</head>
<body>
  <img src="/computer.jpg" alt="">
    float:left 예제입니다.
</body>
</html>

아래 왼쪽 화면은 이미지에 float:left 속성, 오른쪽 화면은 float:right 속성을 둔 결과입니다.

5. float 속성의 문제점

다양한 객체를 간편하게 띄워서 정렬하는 float 정렬에도 문제점이 존재합니다. 전체를 감싸는 컨테이너가 자식 요소들이 모두 float 속성을 가질 때 자식 요소들의 높이를 반영하지 못하고 자신의 높이만큼만 보여주는 문제점이 있습니다.

아래 코드는 float 속성을 설정하지 않은 상황입니다.


<!doctype html>
<html>
<head>
<style>
	.wrap{
    border: 4px solid blue;
	}
	.content{
    margin: 5px;
		height: 20px;
		border: 2px solid green;
	}
</style>
</head>
<body>
		<div class="wrap">
		    <div class="content">내용1</div>
        <div class="content">내용2</div>
		</div>
</body>
</html>

다음은 float 속성을 설정한 코드와 결과입니다. 자식한테 float 속성을 설정하면 자식 요소들은 붕 띄워진 상태이기 때문에 부모 요소가 자식 박스들의 존재를 인식하지 못합니다. 따라서 다음과 같은 결과가 나옵니다.


<!doctype html>
<html>
<head>
<style>
	.wrap{
    border: 4px solid blue;
	}
	.content{
    float: left;
    margin: 5px;
		height: 20px;
		border: 2px solid green;
	}
</style>
</head>
<body>
		<div class="wrap">
		    <div class="content">내용1</div>
        <div class="content">내용2</div>
		</div>
</body>
</html>

위 문제점을 해결하는 방법은 다양하게 존재합니다.

부모 요소에 overflow 속성을 추가합니다.

overflow은 넘치는 현상을 다루기 때문에 넘쳐흐르는 자식 요소를 포함하도록 부모 요소의 높이를 늘여줍니다. 즉 .wrap 부분에 overflow:hidden; 혹은 overflow:scroll; 등의 필요한 overflow 속성을 추가하여 해결합니다.


.wrap {
    border: 4px solid blue;
		overflow: hidden; 
	}

부모 요소의 높이 값을 직접 지정해줍니다.

강제로 부모에 높이를 주어 늘리는 것이므로 좋은 방법은 아닙니다. 만약 자식 요소의 높이가 변경 되었을 경우 혹은 자식 요소가 추가되어 부모 요소의 높이 수정이 불가피한 경우마다 부모의 높이를 변경해야 하므로 비효율적입니다.


.wrap {
    border: 4px solid blue;
		height: 35px;
	}

위와 같은 방법으로 수정하면 아래와 같이 해결된 모습을 볼 수 있습니다.

clear 속성 사용

float 이 사용된 요소의 바로 다음 형제 요소에 clear 속성을 사용합니다. clear 속성은 left, right, both 세 가지 값을 가지며 float이 사용된 요소가 정렬된 방향에 따라 적절히 사용해 주시면 됩니다.


<div class="first"></div>
<div class="second"></div>


div{
  width:100px;
  height:100px;
  background-color:black;
}
.first{
  float:left;
}
.second{
  clear:both; /* both 속성은 left, right 둘 다 클리어 합니다. */
  background-color:pink;
}

clear-fix 방법

CSS의 ::after 가상요소로 해결합니다. 부모 요소에 가상으로 마지막 child 요소를 덧붙여서 부모 요소인 wrap이 자식 요소들을 알아보게 하는 방법입니다. 이러한 방법을 clear-fix 라고 합니다. 이렇게 하면 부모 요소와 이후에 float요소를 따라오는 현상까지 모두 다 해결됩니다. display:block;대신 display:table;을 사용하기도 합니다.


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