what is 레이아웃 float ?

✌ 레이아웃 float은 대체 무엇인지

우리 함께 알아볼까요 ?

 

✍🏻레이아웃 float✍🏻

float ? 

float : left;

float 요소는 좌측이나 우측에 붙이고 아래 내용이 그 주변을 흐르게 하는 것입니다.

왼쪽 또는 오른쪽부터 가로 정렬을 하고 싶은 요소들에 float를 적용하면 됩니다.

float 을 사용하지 않으면 block요소라서 세로로 나열

float을 이용하면 가로로 배치할 수 있습니다.

float는 블록 개념을 갖고있는 div 태그와 , 인라인개념을 갖고있는 span 태그를 함께 사용합니다.

속성값	속성 설명
left	float : left;   요소를 왼쪽에 배치하고 나머지 콘텐츠는 그 주변을 흐르도록 함.
right	float : right;   요소를 오른쪽에 배치하고 나머지 콘텐츠는 그 주변을 흐르도록 함.

 

🤔 주의 🤔 float 요소 뒤 따라오는 형제 요소는 float 요소의 존재를 인지못하고 무시하여 배치하기 때문에

형제요소끼리 float 요소의 영향을 받으므로 모든 형제 요소에게 float 속성을 적용해야합니다.

 

정렬할 때 편리한 float! 문제점은 뭘까 ? 

float을 사용한 요소들은 둥둥띄어져있기 때문에 다른 요소들과 겹칠수 있다.

   --> 해결방법 : overflow : hidden  명령어 추가

---

만약 float로 레이아웃을 설정하고 난 뒤에 콘텐츠가 계속 또 있으면 그 콘텐츠까지 끌어 올리기 때문에

clear문법을 사용하여 원하는 위치에 정렬 시켜야 합니다.

✍🏻clear✍🏻

clear 속성은 float된 박스들의 바로 다음 박스를 원래대로 배치합니다.

즉,  지정한 곳 외에 float을 해제시켜주는 중요한 역할을 하는데, clear는 블록이어야 합니다.

clear : both;

clear를 사용한다면 float을 손쉽게 해제할 수 있습니다.

---

clear 말고도 float를 해제하는 방법

 

1. 부모 박스에 overflow: hidden;을 적용시킨다.

2. 부모 박스에 clearfix를 적용시킨다.

 

✨결론 !

float : left;

float : right; 를 사용하면 내가 원하는 위치로 블록을 왼,오른쪽 정렬시킬 수 있다.

clear를 사용하면 float를 해제할 수 있다.

clear 말고도 부모 박스에 overflow: hidden;     /    부모 박스에 clearfix를 적용시키면 된다.