float
- 요소가 기본 레이아웃 흐름에서 벗어나 좌측 또는 우측으로 이동시키는 요소
- 보통 요소를 가로 정렬하기 위해 사용되는 기법
- float 속성을 부여하고 싶은 요소에 적용
- float 속성의 설정 가능한 값은 아래와 같음
- none
아무 효과를 주지 않음(default)
- right
요소를 오른쪽으로 이동
- left
요소를 왼쪽으로 이동
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.img-1 { float: left; }
.img-2 { float: right; }
</style>
</head>
<body>
<img class="img-1" src="./test.PNG" alt="" width="50px">
<p>
동물계 척삭동물문 포유강 식육목 고양이아목 몽구스과에 속하는 육식성 포유류. 주로 남아프리카에 서식하는 동물이다.
<br>
화석상의 기록으로는 1974년 남아프리카공화국 호프필드(Hopefield, South Africa)에 있는 홍적세 초기인 180만년전에 퇴적층에서 수리카타 메이저(Suricata major)이라는 멸종된 미어캣 화석이 발견되면서이다.
</p>
<img class="img-2" src="./test.PNG" alt="" width="50px">
<p>
동물계 척삭동물문 포유강 식육목 고양이아목 몽구스과에 속하는 육식성 포유류. 주로 남아프리카에 서식하는 동물이다.
<br>
화석상의 기록으로는 1974년 남아프리카공화국 호프필드(Hopefield, South Africa)에 있는 홍적세 초기인 180만년전에 퇴적층에서 수리카타 메이저(Suricata major)이라는 멸종된 미어캣 화석이 발견되면서이다.
</p>
</body>
</html>
clear
- float 속성을 적용하면 그 이후의 모든 요소들의 정확한 위치를 설정하기 어려워지므로, clear 속성을 적용하여 이전의 float 속성에 영향 받지 않도록 설정
- clear 속성의 설정 가능한 값은 아래와 같음
- none
clear을 설정하지 않음(default)
- right
float: right를 취소
- left
float: left를 취소
- both
float: right, float: left 모두 취소
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.img-1 { float: left; }
.img-2 { clear: both; }
</style>
</head>
<body>
<img class="img-1" src="./test.PNG" alt="" width="50px">
<p>
동물계 척삭동물문 포유강 식육목 고양이아목 몽구스과에 속하는 육식성 포유류. 주로 남아프리카에 서식하는 동물이다.
<br>
화석상의 기록으로는 1974년 남아프리카공화국 호프필드(Hopefield, South Africa)에 있는 홍적세 초기인 180만년전에 퇴적층에서 수리카타 메이저(Suricata major)이라는 멸종된 미어캣 화석이 발견되면서이다.
</p>
<img class="img-2" src="./test.PNG" alt="" width="50px">
<p>
동물계 척삭동물문 포유강 식육목 고양이아목 몽구스과에 속하는 육식성 포유류. 주로 남아프리카에 서식하는 동물이다.
<br>
화석상의 기록으로는 1974년 남아프리카공화국 호프필드(Hopefield, South Africa)에 있는 홍적세 초기인 180만년전에 퇴적층에서 수리카타 메이저(Suricata major)이라는 멸종된 미어캣 화석이 발견되면서이다.
</p>
</body>
</html>
float 사용시 주의사항
- float 속성을 사용 시 position 속성의 absolute를 사용하면 적용되지 않음
- float 속성을 사용한 요소는 일반적인 흐름에서 벗어나 부모요소에서 해당 요소의 높이를 인식하지 못함
- 과거에는 float를 이용하여 레이아웃을 구성했으나, 현재는 flexbox나 grid 등 레이아웃 기술을 이용하여 효율적으로 레이아웃을 구성하므로 float는 참고용으로만 볼것