[CSS] Float 정의 & Float 부작용 제거방법

CSS에서 Float 속성은 뜨다, 띄우다 라는 뜻이며, 출현은 이미지를 띄어서 텍스트와 보기 좋게 배치하기 위함이었습니다.였습니다.

면접 질문에서 Float 속성을 해제하는 방법에 대해서 질문받았는데요. 왜 물어보았을까요?

여러 가지 이유가 있다고 생각합니다.

주관적으로 우리 회사에는 float로 레이아웃을 배치한 코드가 있는데, 유지 보수할 수 있겠어요?로 해석하였습니다.

float에 대한 이해도가 부족하면 유지 보수하는데 어려움을 겪거나 해결할 수 없겠죠?

 

원래 Float는 이미지를 띄우기 위함이었으나, 레이아웃을 잡는 데 사용으로 변화되었다고 합니다.

이로 인해 nomarl flow(마크업 흐름에 따라 위에서 아래로)에 변화가 생기게 되고 부모의 공간 등이 무시되는 현상 등이 발생하게 됩니다.


그래서 float를 해제하는 방법을 물어보셨다고 생각합니다. 모던 레이아웃 배치 기법을 사용하면 float를 통해 레이아웃을 만들진 않겠지만 역사적인 레이아웃 기법의 변화에서 지난 방법을 이해가 있는가를 물어보았다고 생각합니다.



float의 레이아웃 배치 용이기에 배치의 기준점이 필요합니다 '부모' element입니다. 기준점을 갖고 normal flow에 위치해야 될 공간에 뜨게 됩니다.



또한, float의 특징으로는

1.block element만 사용 가능하다(인라인 요소에 float를 사용하면 inline-block으로 변경됩니다.)
2. 속성 값은 none, right, left, inital, inherit
3. 블록 요소의 기본 특성인 자동 줄 바꿈을 무시하고 강제로 띄어서 좌우로 배치



등이 있습니다. 이 특징은 어떠한 결과를 야기할까요?



1에 대한 결과로 inline element에 float를 주게 되면 block으로 변경되며 마치 div인 것처럼 동작하며

자신만의 영역을 갖고 있는 inline-block 박스처럼 렌더링 됩니다.

-> inline element에 float:left를 하는 것은 display:inline-block 선언한 것과 같다.

 

2에 대한 결과로 default 값인 none을 제외하면 왼쪽, 오른쪽 또는 기존, 상속된 값밖에 선택할 수 없습니다.

특수한 레이아웃(가운데 같은) position을 사용하여야 합니다.

3에 대한 결과로 normal flow에 존재해야 될 곳에 뜨게 되며, block element의 특징은 줄 바꿈을 무시해서 형제 element를

가리게 되는 현상이 발생할 수 있습니다.

부작용으로는 특정 float 된 블록 요소의 부모 element가 float된 자식 elment의 높이 값을 인지하지 못할 수 있습니다.

이러한 float의 뜨는 현상을 해제하려면 어떻게 해야 할까요?

 

 

float 해제 기법 6가지를 소개합니다.



1. 부모 요소에 강제로 높이 값 부여 -> 근본적인 해결이 안 됨, 반응형 시 자동 높이 값 설정 불가

2. 부모 요소에 float 요소 부여 -> 해결은 되는데 부모의 레이아웃이 깨짐(가운데 배치 못함)

3. 부모 요소에 강제로 oveflow:hidden 적용 (살짝 삐져나가는 디자인 불가) 해당 요소 안의 콘텐츠를 박스 외부로 표현해 줄 수 없음

4. 부모 요소에 강제로 overflow:auto 적용 (특정 브라우저에서 스크롤 바가 표시됨)

5.float 된 요소의 다음에 나오는 태그에 clear:both를 지정합니다. clear:both가 적용된 요소에는 margin-top 적용 불가

6. 플롯 된 부모 요소에 가상 요소 선택자를 만들고 clear both -> 문서와 디자인을 구분하는 최고의 방법

 

5. 상황에 대한 추가

 

 

    <div class="wrap">
        <div class = "left">a</div>
        <div class = "right">b</div>
        <div class = "bottom">c</div>
    </div>

.wrap{
    width:800px;
    border:5px solid black;
    margin: 0px auto;
}

.left{
    width:400px;
    height:400px;
    background-color: red;
    float:left
}

.right{
    width:400px;
    height:400px;
    background-color: blue;
    float:right;
}

.bottom{
    background-color: aqua;
    clear: both;
}

 

그림의 코드를 첨부해서. bottom 클래스를 가진 div에 clear:both를 줘서 해결할 수 있긴 하다. (운이 좋게 이런 상황이 발

 

생활 수 있으니) 다만 5번의 조건인 margin-top 속성이 적용되지 않고(. left div가 가진 height400 px까지 적용 x)

 

margin top이 형제 요소의 height값보다 커지면 ex) 401 이상이 되면 역마진 현상이 발생됩니다.

 

역마진 현상의 해결방법은

해결 방법 1 : '레이아웃 작업 시' 상단 여백은 부모 블록 요소에서 padding으로 적용

해결 방법 2 : 부모 요소에 border를 적용하면 역상속 방지 가능

 

 

글의 본문과는 상관없으나,



가상 요소 선택자란 html 콘텐츠 추가 없이 css 자체적으로 가상의 html 콘텐츠를 문서에 삽입 가능한 기능입니다.

다만 가상 요소 선택자는 좋은 방법은 아닙니다 스크린리더기 등에서 css를 읽지 못하기 때문이죠

그렇기에 중요한 콘텐츠를 가상 요소 선택자로 넣는 것은 안 좋다고 생각합니다.

다만 float 해제의 경우는 디자인을 위함이지 문서에 구조 태그들에 위치해 있어야 하는 게 아니므로

최고의 방법이 되는 것입니다.



가상 선택자는 브라우저가 인지하지 못하는 콘텐츠이나, 오히려 이점이 float를 해제하는 기법에는 적합합니다

(::before, ::after 해당 태그의 앞, 뒤쪽에 위치)



가상 선택자는 기본적으로 inline 요소이며 css 스타일링 가능합니다.

 

 

 

 

 

 

마지막으로 float에는 브라우저에 따른 여러 가지 버그들이 존재했었는데요



더블 마진 버그

3픽셀 밀려남 버그



등..



레이아웃을 배치하는 기법으로는 모던 기법을 사용하되, float에 대한 이해도를 바탕으로 유지 보수해야 할 일이 생긴다면 해결할 수 있는 게 가장 이상적이라고 생각합니다. 

 

추가적으로, 질문을 했다는 의도 자체가 회사 코드에 float 기반의 레이아웃 구성이 존재한다는 뜻으로 해석하여 float에 대한 이해도가 필요하며 관공서 같은 큰 회사일수록 기존의 코드들을 크게 바꾸기 어려울 거라 생각됩니다(금액 문제)

 

 

 

+

 

추가적으로 float를 해제하는 방법이라는 것에 대한 표현을 정정하고 싶습니다.

float를 해제하는 방법은 float: none이며

float로 발생하는 높이 값을 잃어버리는 현상(줄여서 부작용)을 해제하는 방법으로요

float의 부작용을 해제하는 방법이라고 이해하는 게 나을 것 같습니다.