[TIL] float 속성

css logo

1. float 이란

◎ float은 주로 이미지 주변에 텍스트를 감싸기 위해 만들어진 프로퍼티이다. 하지만 페이지 전체의 레이아웃을 잡을 때에도 정말 중요한 속성이 된다.

2. 문제점

◎ float 속성에는 left, right, none 가운데 하나의 값을 줄 수 있습니다.

   float를 left로 값을 준 코드와 화면을 봐보자.

 

html

css

img 태그에 float: left;  속성을 주어서 왼쪽 정렬을 하였다.

코드만 보고 화면이 어떻게 나올지 예상하자면, img는 왼쪽, span은 img 옆에 나오며, container 클래스의 css border가 그에 맞게 잘 나와야 한다. 

자, 이제 화면을 봐보자

 

browser

이상하다. 예상한 화면과는 전혀 다르게 나왔다.

이처럼 float를 쓸 때는 주의할 사항이 있다.

float는 말 그대로 띄워져 있는 상태여서 float 속성을 가진 요소는 부모가 높이를 인지할 수 없어서 위의 그림과 같이 부모를 벗어난다.

그래서 float을 다루기 어렵거나 귀찮은 요소 중 하나라고 생각하는 사람들이 있다.

하지만 왜 이런 속성이 있겠나? 많이 사용하고 당연히 위의 같은 상황을 해결하는 방법이 있다.

3. 해결방안

• clear

• overflow

3-1. clear

◎ clear는 float 동작 방식을 제어하는데 정말 중요합니다. 가장 많이 사용되는 방법이며, 재사용성도 좋으며 나 또한 이 방법을 주로 사용한다.

코드와 화면을 보면서 얘기해보자.

 

html

css

html 코드를 보면 img 태그의 부모 요소인 div에 clearfix 클래스를 추가해줬다.

css 코드를 보면 ::after 가상 선택자를 사용하여 clear: both; 값을 주었다.

※ ::after 가상선택자 사용법: https://jindev-t.tistory.com/7

 

이제 화면을 보고 처음 예상했던 화면이 나오는지 확인해보자.

 

clear

잘 나온다. 이처럼 clear 속성을 사용하면 float를 쉽게 제어할 수 있다.

부모 요소에 clearfix 클래스를 추가한 이유는 지금은 코드가 별로 없지만 다른 쪽에서도 float를 사용할 시, 

똑같이 부모 요소에 clearfix 클래스를 추가하면 반복적인 코드를 줄이며 재사용할 수 있기 때문이다.

3-2. overflow

◎ clear 다음으로 많이 사용하는 방법은 overflow 속성을 주는 것이다.

코드와 화면을 보면서 얘기해보자.

 

html

css

clear 방식과 차이점은 없다.

부모 요소 div에 overfix라는 클래스를 추가하고. overfix css에 overflow: hidden; 값을 준다.

화면을 보면 clear 속성을 사용할 때와 같은 화면이 잘 나온다.

 

overflow

부모에 oveflow: hidden을 주게 되면 부모가 가지는 영역이 block formatting context가 되기 때문에 집 나간 자식들의 높이만큼 새로운 독립된 영역을 갖게 되는 것이다.

원래는 overflw: hidden의 목적은 float 속성과는 상관이 없다.

overflow는 단순히 콘텐츠가 박스를 넘어섰을 때 어떻게 동작할지에 관한 것이다. 근데 이 속성을 활용하게 되면 집 나간 자식들을 다시 데려올 수 있는 역할을 하게 되는 것이다.

※ 참조

http://ko.learnlayout.com/float.html

CSS - float

https://simsimjae.tistory.com/334

CSS - Overflow와 float속성