![[2021/12/22]국비지원 CSS3 4-(4) float](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FRudoe%2Fbtrr2Xi47hE%2FAAAAAAAAAAAAAAAAAAAAALgDd3SwAcxDDqdC1omjizbC0XzRGfqwGAg7IO5KcvV5%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1756652399%26allow_ip%3D%26allow_referer%3D%26signature%3DF3Frur4Cw%252Bfp2yvDC1VDXCtm0do%253D)
- float : 위치 조정 / 주변에 영향 엄청나게 줌
- float : left = 왼쪽에 붙이기
- float : right = 오른쪽에 붙이기
- clear : both = float을 주게 되면 기준점이나 밑에 깔리는 상위개체가 짜부되는 상황이 생기는데,
그 상황을 방지하고 형태를 유지하도록 할 때 주는 property값
float 1
<!DOCTYPE html>
<html lang="en">
<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>float</title>
<style type="text/css">
div{width:200px;height:200px;color:#000;font-size:30px;font-weight:bold;}
#red{float:left;background-color: red;}
#green{float:left;background-color: green;}
#blue{float:left;background-color: blue;}
/* float : left, right */
</style>
</head>
<body>
<div id="red">Red</div>
<div id="green">Green</div>
<div id="blue">Blue</div>
</body>
</html>
결과물 1
float 2
<!DOCTYPE html>
<html lang="en">
<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>float</title>
<style type="text/css">
div{font-size:30px;font-weight:bold;color:#fff;}
#wrap{width:600px;height:600px;background-color: gray;}
#yellow{width:600px;height:100px;background-color: yellow;}
#red{float:left;width:300px;height:400px;background-color: red;}
#green{float:right;width:300px;height:400px;background-color: green;}
#blue{clear:both;width:600px;height:100px;background-color: blue;}
/* clear : left, right, both*/
</style>
</head>
<body>
<div id="wrap">
<div id="yellow">Yellow</div>
<div id="red">Red</div>
<div id="green">Green</div>
<div id="blue">Blue</div>
</div>
</body>
</html>
결과물 2
