[CSS] float

이거 분명히 나중에 검색할 단어 찾기도 어렵고 헷갈릴꺼다.

<!-- HTML 코드 -->
<p class="left-align">왼쪽 정렬</p>
<p class="right-align">오른쪽 정렬</p>

이런 HTML 코드가 있을 때

/* CSS 코드 */
.left-align {
    text-align: left;
}

.right-align {
    text-align: right;
}

이렇게만 쓰면

왼쪽 정렬

											오른쪽 정렬

이렇게 다른 줄로 나온다.

이 둘이 한 줄로 나오게 하고 싶다면

float를 써야한다.

/* CSS 코드 */
.left-align {
    float: left;
}

.right-align {
    float: right;
}

이렇게 써주면 "왼쪽 정렬 ~~ 오른쪽 정렬" 한줄로 나온다!

 

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

https://developer.mozilla.org/en-US/docs/Web/CSS/float

mdn 공식 문서에 따른 정의는 다음과 같다.

float은 normal flow로부터 빠져 text 및 inline 요소가 그 주위를 감싸는...

달리 말해, text와 inline element는 float을 인식하고 둘러싼다는 의미.

아예 flow로부터 벗어나버리는 absolute positioning과 달리 여전히 흐름의 일부로 남아있다.

또한, float은 block 사용을 뜻하기 때문에 보통 display값이 block으로 자동적으로 수정된다.(flex등 예외는 mdn 확인)

 

float에서 발생할 수 있는 문제와 해결법

 

1. 부모 요소에 overflow 속성을 추가(부모 입장)

다만, float라는 이름처럼 float를 이용한 정렬은 둥둥 떠다니면서 정렬하기 때문에 다른 그림, 글자들과 겹칠 수 있다.

이런 '뗏목'과 같은 성질 때문에 '가두리'를 설치해줘야 한다고..ㅎㅎ 재밌는 표현!

 

'가두리' 만들기

뗏목 태그(float 태그)들을 div 태그로 감싸고 CSS에서 다음과 같이 해주면 된다.

/* float를 감싼 div 등의 태그 선택자 */ {
    overflow: hidden;
}

overflow는 float를 다 묶어주고 그 다음에 오는 HTML 요소들이 float의 영향을 받지 않도록 해준다.

자식들이 모두 float일 때 사용!

 

1.1 부모 요소에게 inline-block

/*부모요소선택자*/{
    display: inline-block;
}

declaration을 해준다.

이렇게 부모 요소 입장에서 자식 요소 인식하도록 해준다!

 

2. 부모 요소의 높이 값등 크기 자체를 바꿔준다(좋은 방법이 아니므로 비추)

예를 들면 float으로 떠버린 child element가 원래 parent element라는 box 안에 있어야 했다면 억지로 그 안에 넣어주는 방식이다.

다시 말하자면, 그냥 주먹구구식인거다. 백번을 양보해도 이렇게는 안해야겠다.

 

3. clear 속성을 사용한다.(다음 형제 요소 입장에서 인식하게 해주기)

float이 사용된 요소가 있다면, 목적하는 바에 따라서 아마 형제 요소가 있을 것이다. 이때 float 바로 다음 형제 요소에 clear 속성을 사용해주는 방법이다.

<style>
    .first{
        float:left;
    }
    .second{
        clear:both; /* clear의 value로 left, right, both가 올 수 있고 both 속성은 left, right 둘 다 클리어 합니다. */
    }
</style>
<div class="first"></div>
<div class="second"></div>

이렇게 사용. clear의 value는 float이 사용된 방향에 따라 적절하게 사용해주면 된다.

 

(4같은)3.1 clear-fix 방법

가상 요소(pseudo-class)를 이용해주면 된다.

/*float의 parent element selector*/::after

적용방벅은 3과 동일하게 해주면 된다. after로 일종의 다음 형제 selector를 골라준 것이나 마찬가지니깐

float 자식 태그를 가진 div tag class="wrap"일 때, 다음과 같이 작성해준다.

.wrap::after {
	content:'';
	display:block;/* block 대신 table을 사용하기도 한다.*/
	clear:both;
}

+ 3.1에서 발생할 수 있는 문제

.wrap의 마지막 자식 요소가 float가 아닐 때 float 다음 요소들이 float을 인식하지 못하는 문제가 발생할 수 있다.

따라서, 만약 마지막 요소가 float가 아니면 그냥 3번 방법으로 하자.

1, 1.1, 3.1은 child element들이 전부 float이거나 적어도 last child element가 float일 때 써주는 방법이니깐