본문 바로가기
엘리스 AI 트랙 4기/Frontend CS Study

[CSS] float를 해제하는 방법들

by _sweep 2022. 4. 1.

 

취준생이라면 알면 좋을 프론트엔드 관련 지식들 자료를 보고 정리한 내용입니다.

 

✅ float를 해제하는 방법들

float이라는 단어는 뜨다, 부유물 등의 사전적 의미를 가지고 있다.

이름에 걸맞게 css의 float 속성은 주변의 요소들을 플로팅 요소 주변에 흐르게 만든다.

즉, 해당 HTML 요소가 주변의 다른 요소들과 자연스럽게 어울리도록 만들어 준다.

보통 웹 페이지의 레이아웃을 작성할 때 자주 사용된다.

 

float 속성을 자식 엘리먼트에 사용하게 되면 부모 엘리먼트가 자식의 높이를 감지할 수 없기 때문에 이를 반영하기 위한 방법이 필요하다.

 

<div class="parent">
  부모
  <div class="child">
    자식
  </div>
</div>

 

.child {
  float: left;
}

 

 

✔️ 부모 엘리먼트에 float 적용 

자식 엘리먼트의 높이를 부모에게 반영하는 방법으로 부모에게도 float 속성을 부여하는 방법이 있다.

부모에게 float 속성을 부여하게 되면 부모 엘리먼트는 자식 엘리먼트의 높이를 반영한다.

 

.parent {
  float: left;
}

 

 

하지만 부모 엘리먼트의 너비는 float된 자식의 너비를 담을만큼만 가지게 된다.

이 방법의 경우 부모의 너비가 브라우저 크기에 따라 가변적이어야 하는 경우 적용하기 어렵다.

 

또한 조상 엘리먼트들이 겹겹이 존재하는 경우 자식의 높이를 조상에 각각 전달하기 위해 조상 엘리먼트들에 모두 float 속성을 추가해야 한다는 단점이 존재한다.

 

✔️ 부모에 overflow 속성 적용

자식 엘리먼트의 높이를 부모에게 반영하는 방법으로 부모에게 overflow: auto 또는 overflow: hidden 속성을 부여하는 방법이 있다.

 

overflow: auto 속성은 자식의 너비가 부모의 너비보다 커지는 상황이 발생할 때 가로 스크롤바가 생기기 때문에 일반적으로 권장하는 방식이 아니다.

 

.parent {
  overflow: auto;
}

 

 

overflow: hidden 속성은 자식의 너비가 부모의 너비보다 커지는 상황에서 가로 스크롤바를 생기게 하지는 않지만 넘치는 부분이 잘리기 때문에 완전히 안전한 방법은 아니다.

 

.parent {
  overflow: hidden;
}

 

 

✔️ 부모가 끝나기 전 빈 엘리먼트로 clear 적용

자식 엘리먼트의 높이를 부모에게 반영하는 방법으로 부모 엘리먼트의 영역이 끝나기 직전 clear: both 속성을 부여한 빈 엘리먼트를 넣는 방법이 있다.

 

<div class="parent">
  ...
  <div class="clearfix">
  </div>
</div>
.clearfix {
  clear: both;
  height: 0;
  overflow: hidden;
}

 

 

하지만 의미없는 빈 엘리먼트를 사용하기 때문에 권장하는 방법이 아니다.

 

✔️ 부모에 display: inline-block 적용

자식 엘리먼트의 높이를 부모에게 반영하는 방법으로 부모에 display: inline-block 속성을 적용하는 방법이 있다.

 

.parent {
  display: inline-block;
}

 

 

이 경우 약간의(4px 정도) 여백이 생기며 자식의 너비를 포함할 만큼으로 부모의 너비가 줄어든다.

 

✔️ 가상 선택자 :after로 clear 적용

가상 선택자는 :hover, :active, :focus 등이 존재한다.

가상 선택자는 가상 클래스와 가상 엘리먼트로 구분할 수 있다.

 

가상 클래스는 특정 엘리먼트에 대해 아무런 class를 부여하지 않았지만 역동적으로 class를 변경한 것과 같은 효과를 낼 수 있는 것들을 의미한다.

:link, :visited, :hover, :active, :focus, :first-child 가 가상 클래스에 속한다.

 

가상 엘리먼트는 존재하지 않는 엘리먼트를 가상으로 생성해내는 선택자를 의미한다.

:first-line, :first-letter, :before, :after 가 가상 엘리먼트에 속한다.

 

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

 

 

이 방법은 의미없는 빈 엘리먼트를 사용하지 않으면서 가상 엘리먼트를 이용해 깔끔하게 float을 clear할 수 있다.

 

 

🔍 참조

float http://www.tcpschool.com/css/css_position_float

float을 clear하는 방법 https://naradesign.github.io/float-clearing.html

 

'엘리스 AI 트랙 4기 > Frontend CS Study' 카테고리의 다른 글

[CSS] 박스 모델  (0) 2022.03.09
[HTML] Sematic Markup  (0) 2022.02.13
[HTML] script tag attributes  (0) 2022.02.12
[HTML] local storage, session storage, cookie  (0) 2022.02.05
[HTML] data- 속성  (0) 2022.02.04

댓글