float 속성은 레이아웃을 구성할 때 블록 레벨 요소를 가로 정렬하기 위해 사용되는 중요한 기업이다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
</style>
<title>Document</title>
</head>
<body>
<h1>HTML FLOW</h1>
<p>이렇게 순서대로</p>
<h2>렌더링 하는것 을</h2>
<p>HTML FLOW라고 한다</p>
<p>float 속성은 이 흐름을 벗어나</p>
<p>해당 요소를 다음 요소 위에 떠 있게 한다.</p>
</body>
</html>
정렬
float 속성을 사용하지 않은 요소들은 수직정렬 된다.
float : left 속성을 사용하면 왼쪽부터 가로 정렬되고
float : right 속성을 사용하면 오른쪽부터 가로 정렬된다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.box {
color: white;
font-weight: bold;
font-size: 50px;
border-radius: 25px;
width: 100px;
height: 100px;
margin: 10px;
padding: 10px;
}
.b1, .b2 {
float: left;
}
.b1 {
background: purple;
}
.b2 {
background: orange;
}
.b3, .b4 {
float: right;
}
.b3 {
background: purple;
}
.b4 {
background: orange;
}
</style>
<title>Document</title>
</head>
<body>
<div class="container">
<div class="box b1"> 1 </div>
<div class="box b2"> 2 </div>
<div class="box b3"> 3 </div>
<div class="box b4"> 4 </div>
</div>
</body>
</html>
float 속성은 좌,우측 정렬만 할 수 있다.
