[CSS3]Float란? / Layout 오류 시 해결 방법

🤔Float란 무엇일까?

float는 사전적 의미로

(물 위나 공중에서) 떠가다, (가라앉지 않고 물에) 뜨다 등 뜬다는 의미를 가지고 있다.

 

🤨Float는 왜 필요할까?

우리가 Float를 배우는 이유는 block요소들을 가로 배치하기 위함이다.

block은 자기의 영역을 침범 받지 않은 길막의 특징을 가지고 있어 가로 배치에 어려움이 있는데

이를 float가 해결해준다!

 

📑Float사용법과 원리

float는 부모태그 안에 존재하는 자식 태그들에 적용해 사용된다.

<div class=float>
	<div class="red">Float</div>
	<div class="blue">Float</div>
	<div class="green">Float</div>
</div>

한번 예시로 사용법을 배워보자. 우리가 여러 자식 요소(red, blue, green)중

요소 red에 float를 넣으면 red는 부모 요소(float) 로부터 뜨게 된다.

.red{
	float: left;
}

그리고 부모(float) 요소는 red요소를 집 나간 요소(빈 공간)로 인식한다.

❗ 이때 특징

그렇기에 다중 요소(red, blue, green)가 존재할 때 float를 사용한다면 해당 요소가 뜨면서

생긴 빈 공간을 float를 사용 안 한 다른 요소가 채우게 된다.

(그 이유는 float요소가 공중에 뜨게 되고 뜨면서 생긴 빈 공간을 다른 요소들이 채우기 때문이다.)

 

이때 요소들이 움직이며 부모 요소의 height 값에 영향을 주게 되어 값이 변하는 것을 볼 수 있다.

why? 쉬운 예시로 한번 더 설명하자면 3개의 요소가 있었다고 하자.

이때 1개의 요소에 float값을 준다면 다른 2개의 값이 float값을 준 요소의

영역을 채우기 때문에 부모 요소의 height값의 변동이 오는 것이다.

 

⚙Float 사용 시 dsiplay의 변화

Float를 사용했을 때 inline, inline block, block 상관없이 모두 display는 block으로 변하게 된다.

이로써 기존의 inline 요소들은 width, height, border, padding, margin을 모두 사용할 수 있게 된다.

---

❗Float 특징

display값이 block으로 변한 float 요소가 포함되어 있는 다중요소(red, blue, green)가 있다.

width값이 따로 없던 전과 다르게 이번엔 부모 요소에 width값을 넣어주겠다.

.float{
	width:400px
    }
 
 .red{
 	display:block;
 	float:left
	}

이때 Float값을 가진 요소가 있다면 부모의 width 요소를 100% 따라가는 것이 아니라, 

본인이 가진 content만큼 값이 늘어 나는 block으로 변한다.

나머지 부분은 margin으로 할당된다.

---

📢문제 해결방법

1.overflow:hidden

.float{
	overflow:hidden;
    }

사용은 부모 tag에 overflow:hidden을 삽입해주면 된다.

위의 속성을 이용하여 부모 박스 범위 밖으로 넘어간 float 된 자식 요소들을 안 보이게 하도록 한다.

이는 단순하게 넘어가는 영역을 보이지 않게 하기 위함이 아니다.

overflow를 이용하면 부모 요소가 잃어버린( 부모 요소의 height:auto;일 경우) 자식 요소의

height 값을 되찾아 올 수 있다.

2. css 가상 선택자 ::after ,::before추가

css 가상 선택자인 ::after를 추가하여 css float 오류를 해결하는 방법이다.

앞서 소개한 1번 방법보다 훨씬 더 효율적이고 보편적으로 쓰이는 방법이다.

html로 빈 태그를 만들지 않고, css로 가상의 공간을 만들어 clear 속성을 적용한다.

float을 적용한 태그의 부모 태그의 가장 아랫부분을 가상 선택자로 선택해주는 것이기 때문에 

‘float 속성들을 묶은 div태그::after‘ 의 형태가 됩니다.

(content부분은 가상의 공간에 작성할 내용이 없다면 띄어쓰기 없이 ”"로 비워둔다.)

.clear-fix::after{
    clear:both;
    display:block;
    content: '';
}

 

개발자 도구를 통해 코드를 살펴보면 html에서 float 속성을 적용한 div의 부모 태그의

안쪽 최하단에 ::after라는 가상의 공간이 생긴 것을 확인할 수 있다.

(사용법은 동일하니 상황에 맞게 ::after, ::before을 사용해주면 된다.)