CSS float 해제 방법 정리

레이아웃의 구성을 설계하는 과정에서 많이 사용하는 속성 float

float 속성은 적용한 요소 뿐만 아니라 주변 요소에도 영항을 준다는 사실을 알고 계신가요?

float 속성 사용 후 주변 요소의 배치에 영향을 주지 않기를 원하신다면 이를 해제해 주셔야 합니다!

 

 

 

언제 float 해제가 필요한가요?

아래 코드에서 두개의 div를 만들고 float 속성을 부여하였습니다. 결과를 확인해 볼까요?

 

 

[html]

<div class="container">
  <div class="wrapper">
    <div class="element1">element1</div>
    <div class="element2">element2</div>
  </div>
</div>

[css]

.container {
  width: 600px;
}
.wrapper {
  position: relative;
  border: 1px dashed red;
  padding: 10px;
}
.element1 {
  float: left;
  width: 80px;
  height: 80px;
  background-color: red;
}
.element2 {
  float: left;
  width: 80px;
  height: 80px;
  background-color: yellow;
}

 

 

부모 영역인 wrapper 영역 밖으로 두개의 div element가 이탈해서 보여집니다.

 

 

이렇게 float 속성 사용 후 부모 요소인 wrapper영역의 배치에 영향을 줄 경우 float 속성의 해제가

필요합니다. 그럼 해제 방법을 알아 볼까요?

 

 

 

 

 

float 해제 방법

1. 부모 요소에 overflow : hidden 속성 주기

2. 인접하는 다음 형제 요소에 clear 속성 주기

3. 가상 요소를 사용하여 clear 속성 주기

 

 

 

 

 

방법1.  부모 요소인 wrapper영역에 overflow: hidden 속성을 부여

 

[css]

.container {
  width: 600px;
}
.wrapper {
  overflow: hidden;
  position: relative;
  border: 1px dashed red;
  padding: 10px;
}
.element1 {
  float: left;
  width: 80px;
  height: 80px;
  background-color: red;
}
.element2 {
  float: left;
  width: 80px;
  height: 80px;
  background-color: yellow;
}

 

overflow: hidden 속성 부여 하게 되면 부모 영역인 wrapper영역이 아래와 같이 정삭적으로 자리잡게 됩니다!

 

 

하지만 이 경우에 주의할 사항이 하나 있습니다.

div element를 하나 더 추가하여 absolute 포지션을 주고 위치를 조정해 보겠습니다.

 

 

[html]

<div class="container">
  <div class="wrapper">
    <div class="element1">element1</div>
    <div class="element2">element2</div>
    <div class="element3">element3</div>
  </div>
</div>

[css]

.container {
  width: 600px;
}
.wrapper {
  overflow: hidden;
  position: relative;
  border: 1px dashed red;
  padding: 10px;
}
.element1 {
  float: left;
  width: 80px;
  height: 80px;
  background-color: red;
}
.element2 {
  float: left;
  width: 80px;
  height: 80px;
  background-color: yellow;
}
.element3 {
  position: absolute;
  top: 60px;
  left: 300px;
  width: 80px;
  height: 80px;
  background-color: green;
}

 

 

아래와 같이 부모에 적용된 overflow: hidden 속성 때문에

position: absolute 속성을 지닌 요소가 새로 삽입될 경우 영역 일부가 숨겨져 보이지 않게 됩니다.

 

 

위 방법을 해결하기 위한 두번째 방법을 알아 보겠습니다.

 

 

 

 

방법2.  인접하는 다음 형제 요소에 clear 속성 주는 방법

마지막 요소로 clear element를 추가하고 clear:both 속성을 추가 하여 주었습니다.

(clear:both 속성 사용을 위해서는 display: block 속성변경이 필요)

 

 

[html]

<div class="container">
  <div class="wrapper">
    <div class="element1">element1</div>
    <div class="element2">element2</div>
    <div class="element3">element3</div>
    <div class="clear"></div>
  </div>
</div>

[css]

.container {
  width: 600px;
}
.wrapper {
  position: relative;
  border: 1px dashed red;
  padding: 10px;
}
.element1 {
  float: left;
  width: 80px;
  height: 80px;
  background-color: red;
}
.element2 {
  float: left;
  width: 80px;
  height: 80px;
  background-color: yellow;
}
.element3 {
  position: absolute;
  top: 60px;
  left: 300px;
  width: 80px;
  height: 80px;
  background-color: green;
}
.clear {
  display: block;
  clear: both;
}

 

 

아래 결과와 같이 부모 요소도 정상적으로 자리잡고 element3의 경우에도 잘리지 않고 모두 표시 되는 것을

확인 할 수 있습니다!

 

 

 

clear 속성의 경우 float 해제를 위한 속성으로 깔끔하게 float속성 해제가 가능하지만 위 방법의 경우

clear element와 같은 의미 없는 빈 요소를 추가해야 합니다.

 

때문에 각 태그별로 의미를 갖는 시멘틱 마크업에 위배 되고 불필요한 요소가 추가되게 됩니다.

이를 개선 할 수 있는 마지막 방법을 알아보겠습니다.

 

 

 

 

방법 3. 가상 요소를 사용하여 clear 속성 주기

 

html에 불필요한 태그를 추가하지 않고 float속성을 부여한 부모요소에 가상요소인 ::after를 추가하여

거기에 clear 속성을 부여하는 방법입니다.

(가상요소::after 사용시에는 추가할 내용이 담긴 content:' '를 써 주어야 합니다.)

 

 

[html]

<div class="container">
  <div class="wrapper">
    <div class="element1">element1</div>
    <div class="element2">element2</div>
    <div class="element3">element3</div>
  </div>
</div>

[css]

.container {
  width: 600px;
}
.wrapper {
  position: relative;
  border: 1px dashed red;
  padding: 10px;
}
.element1 {
  float: left;
  width: 80px;
  height: 80px;
  background-color: red;
}
.element2 {
  float: left;
  width: 80px;
  height: 80px;
  background-color: yellow;
}
.element3 {
  position: absolute;
  top: 60px;
  left: 300px;
  width: 80px;
  height: 80px;
  background-color: green;
}
  .wrapper::after {
  content: '';
  display: block;
  clear: both;
}

 

시멘틱 태그에도 위배 되지 않고, 요소의 잘림 현상이 없는 최종 결과 화면을 살펴 볼까요?

 

float 해제 방법과 각자의 방법에서 발생하는 이슈들을 살펴 보았습니다.

그럼 다음에 더 좋은 내용으로 찾아오겠습니다!