float 해지 방법

실무를 하면서도, 테스트에서도 아주 기본이고 단골 중에서도 단골인 float 해제하기.
몇가지 방법이 있지만 실무에서 가장 많이 사용하는 방법 기록

 

일단 float을 사용하면 아래와 같은 현상이 일어남

float을 이용하면 생기는 현상 확인 html

    <div class="floatBox">
        <div class="float box"></div>
        <div class="float box"></div>
        <div class="float box"></div>
    </div>
    <div class="nextContent"></div>

float을 이용하면 생기는 현상 확인 css

.float {float: left;}
.box {border: solid 1px #000; width: 100px; height: 100px;}
.nextContent {width: 300px; height: 200px; background-color: skyblue;}

float을 이용하면 생기는 현상 확인 결과

float을 지정한 영역은 떠있는 상태로 지정이 되서 높이 값이 인지를 못함.

그래서 다음에 오는 영역이 떠있는 부분을 대신 채움.

 

 

방법1: 부모에 overflow:hidden 적용

float된 요소들의 부모태그에 overflow:hidden을 적용

But 부모태그에 박스 밖 영역의 표현하고자 하는 스타일이 있다면 짤려서 사용 못함. 

 

 

방법2: 부모에 display:inline-block 적용

float된 요소들의 부모태그의 display 속성을 inline-block으로 적용

But 부모태그가 block속성이여야 하는 레이아웃 인경우는 사용 못함.

 

 

방법3: 부모에 가상요소 after에 clear:both 적용

float된 요소들의 부모태그에 가상요소 after를 사용해서 clear:both를 적용

🚀 가장 많이 사용하고 추천하는 방법

 

html

    <div class="floatBox clear">
        <div class="float box"></div>
        <div class="float box"></div>
        <div class="float box"></div>
    </div>
    <div class="nextContent"></div>

css

.float {float: left;}
.box {border: solid 1px #000; width: 100px; height: 100px;}
.nextContent {width: 300px; height: 200px; background-color: skyblue;}
.clear::after {content: ""; display: block; clear: both;}

가상요소 after에 clear:both 적용 결과

😀저는 사용할때 clear 이라는 class를 만들어서 float을 사용한 부모태그에 넣어서 사용했음!

 

 

방법4: 부모에 display:flow-root 적용

float된 요소들의 부모태그의 display 속성을 flow-root로 적용

But 익스지원 안됨 >> 앞으로 익스를 쓰지 않는다면 가장 많이 사용될 방법이라고 생각합니다.

 

 

👏🏻 요즘 flex가 있어서 float의 사용도가 줄었지만 그래도 여전히 많이 사용하고 있어서 기록해 봤습니다.