HTML & CSS float 정리

 

 

이렇게 생긴 box layout을 정리하려면 어떻게 해야 될까요??

여러가지 방법이 있겠지만.

float 속성과 float을 사용하여 위의 layout을 만드는 방법을 소개해 보겠습니다 😉.

---

float의 사전적 의미는 "뜨다"입니다.

 

 

div는 블럭 요소 입니다.  그렇기에 박스의 오른쪽에 텍스트는 오지 못하죠.

하지만 그걸 가능하게 해주는 것이 float요소입니다.

float 요소의 정확한 정의는 

"한 요소가 보통 흐름으로부터 빠져 텍스트 및 인라인 요소가 그 주위를 감싸 해당 요소에 좌 우측에 배치 되게 합니다." 입니다.

https://developer.mozilla.org/ko/docs/Web/CSS/float

float - CSS: Cascading Style Sheets | MDN

 

CSS에서 float이 어떻게 동작하는지 확인해 보겠습니다.

<style>
.one {
            background-color: yellow;
            width: 300px;
            height: 300px;
}
.float-one {
            background-color: black;
            width: 100px;
            height: 100px;
            float: left;
}
</style>

<div class="one">
        <div class="float-one"></div>
        <p>hello world!</p>
</div>

float을 사용했을 때, 사용하지 않았을 때의 차이입니다.

어떤 차이가 있는지 아시겠나요???

hello world!라는 단어가 검은 박스의 아래 혹은 오른쪽에 위치하고 있습니다.

float의 사용이 이걸 가능하게 해줍니다.

 

---

 

사용법

float: left;
float: right;
float: none;
float: inline-start;
float: inline-end;

 

float속성을 사용한 요소의 위치를 위의 코드중 선택해서 넣어주면 됩니다!.

 

 

⚠️주의할 사항

자식 요소들이 모두 float 속성을 가지게 되면,

컨테이너 요소의 높이에 자식 요소들의 높이가 포함되지 않는 것에 주의해야 합니다.

이게 무슨 말이냐 함은

container안의 자식들로 A B C박스들을 넣어도 자식요소 A B C박스의 크기가 부모요소인 container의 크기가 되지 않는 다는 것이죠.

 

이 문제를 해결하기 위해서는

1) 부모에 높이 갚을 정해준다.

2) overflow: hidden요소를 사용한다.

3)부모의 가상 요소 ::after 를 사용하는 방법입니다. 

 

이상 float의 설명이였습니다~.