🍚 float
- float는 '띄우다'라는 뜻이다.
- 3차원으로 생각해서 공중으로 띄워서 나머지공간을 아래 태그들이 올라가는 느낌으로 이해하면 된다.
- 뉴스나 기사에서 사진이 글에 둘러쌓여잇는 느낌을 줄때 주로 사용한다.
- 예시에서 yellow의 가로길이는 100%지만 inline요소는 foat된 공간에 들어갈 수 없어 옆으로 밀려나는 원리이다.
👉 예시
💻 html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class='red'></div>
<div class='yellow'>텍스트같은 inline요소 </div>
<div class='green'></div>
</body>
</html>💻 css
div {
width :100%;
height: 150px;
}
.red {
width: 150px;
background-color: red;
float: left;
}
.yellow {
background-color: yellow;
}
.green {
background-color: green;
}👀 결과
나의 개발지식 output 공간