1.의의
엘리먼트를 뛰워서 오른 쪽 또는 왼쪽으로 배치하는 프로퍼티이다.
웹페이지에서 텍스트와 함께 이미지 배치를 위해 고안되었지만, 수평 정렬을 위해 기존에 사용되었다.
float는 본래 수평 정렬을 통한 레이아웃을 만들기 위해 고안된 것이 아니며 ,이미지와 문단 배치를 위한 프로퍼티로 만들어 졌다.
float 는 복잡하고 , 기본 동작과 달라보이는 다양한 케이스가 나타날 수 있고, 이를 해결하는 공식적인 방법은 없으며 , 디자이너나 퍼블리셔가 이용하는 비공식적인 방법은 많이 있다.
수평 정렬을 위해 float, flexbox, css grid 를 사용할 수 있다.
현재 대부분의 프로젝트는 flexbox가 주로 되지만, float도 기존 프로젝트에 사용되기 때문에 이해해야 한다.
none:요소를 떠 있지 않게 함(디폴트)
right :요소를 오른쪽에 띄운다.
left :요소를 왼쪽으로 띄운다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<style>
div {
width: 100px;
height: 100px;
border: 2px solid #f2b441;
border-radius: 10px;
}
.box1 {
background: #f2d541;
float: left;
}
.box2 {
background: #5fb6d9;
float: left;
}
.box3 {
background: #d90404;
float: right;
}
.box4 {
background: #3b9cd9;
float: right;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</body>
</html>
none:float를사용 할 수 있다.(디폴트)
right :왼쪽 float을 사용해제 한다.
left :오른쪽 float을 사용해제 한다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>박스모델</title>
<style>
div {
padding:20px;
margin:10px;
}
#box1{
background:#ffd800;
float:left; /* 왼쪽으로 플로팅 */
}
#box2 {
background: #0094ff;
float:left; /* 왼쪽으로 플로팅 */
}
#box3 {
background: #00ff21;
}
#box4 {
background:#a874ff;
clear:left; /* 플로팅 해제 */
}
</style>
</head>
<body>
<div id="box1">박스1</div>
<div id="box2">박스2</div>
<div id="box3">박스3</div>
<div id="box4">박스4</div>
</body>
</html>
float으로 레이아웃을 구현할 때 고려해야 할 여러 가지 문제들이 있다.
이러한 여러가지 특징은 화면을 구현할 때 복잡한 문제를 발생시킨다.
참고)clearfix 가 있는 자식 요소들을 모두 float 이 적용되어야 함