[CSS] float가 정확히 어떤 역할을 하는 걸까?

✍ 따뜻한 개발 공부

따따시 2022. 7. 28. 15:19

프로젝트를 하다보면 css에 float를 99프로 사용하게 되었는데,

단순히 정렬하는 기능이라고 알았지 구체적으로 뭐하는 녀석인지 궁금하여

float에 대해서 찾아보았다 🧐

한마디로 풍선 불어올리기라고 생각하면 좋을 것 같다! (부스트코트에서 풍선처럼 붕붕 띄운다고 생각하라고 하셨다)

float는 left와 right가 있다.

float의 기능을 이해하기 위하여 아래 예시를 만들어보깅

<style>

.a {

}

.b {
float: left;
}

.c{

}

</style>


<body>
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
</body>

원래대로라면, a->b->c 순으로 정렬이 되있겠지만

b가 float가 적용되면 풍선처럼 위로 붕~ 뜬다 생각하고,

c가 b가 공중위로 떠올라있으니 어? b자리가 비어있네? 하고 b자리로 들어가는 것!