float 해제

float이 끼치는 영향

float해제 방법1 - 부모요소 height 부여

• 그림과 같이 좌우로 플로팅 된 요소를 가지고 있는 부모 요소를 파란 점선으로 표시.
• 플로팅 된 자식 요소의 높이 값만큼을 부모 요소에게 높이 값으로 부여해 공간을 늘려 마치 플로팅 된 내용이 해제된 것처럼 보이는 효과를 줌

<div class="box_wrap">
  <div class="box_parent">
    <div class="box box1">box1</div>
    <div class="box box2">box2</div>
  </div>
</div>

.box_wrap {
  width: 400px;
  margin: 0 auto;
}
.box_parent {
  height: 100px;  /* 자식인 .box들의 높이값이 고정일경우 같은 높이값을 부여함. */
  border: 3px dotted blue;
  padding: 10px;
  
}
.box {
  width: 100px;
  height: 100px;
  color: #fff;
  text-align: center;
}
.box1 {
  float: left;
  background-color: green;
}
.box2 {
  float: right;
  background-color: pink;
}

• 하지만 이는 전체의 흐름을 방해하지 않도록 하는 방법일 뿐 정확하게는 플롯이 해제된 것처럼 보이는 눈속임과 같은 해제 방법이라고 할 수 있음. 예를 들어 여기 box2의 높이 값을 200px로 바꾼다면 부모의 높이 값도 고정이기 때문에 이처럼 자식 요소가 넘치는 현상이 일어나게 됨.
• 결론적으로 이 방법은 자식 요소가 고정된 높이 값을 가지며 부모 역시 고정된 높이 값을 가진 경우에만 사용할 수 있을 것

float해제 방법2 - 부모의 요소의 float 속성

자식 요소가 좌우로 플로팅 되었을 때 부모가 float 속성(none을 제외)을 가진다면 그 부모 요소는 자식 요소의 높이 값을 수렴하게 됨

• 이미지와 같이 부모가 float 속성을 이미 가지고 있을 시에는 자식의 float을 따로 해제해 주지 않아도 됨. 하지만 그 부모의 요소 또한 float의 영향을 받기 때문에 그 부모도 float이 해제한 상태가 됨

• 결론적으로 이 해제 방법은 이미 float이 되어 있는 부모 요소가 자식 요소들에게 float이 부여된다고 했을 때 따로 해제 방법을 사용할 필요가 없다는 것으로 인식을 하기 위한 방법의 소개

• 위의 여러 가지 상황처럼 자식 요소의 float을 해제하기 위해서 부모 요소에 의미 없는 float을 부여하는 방법을 사용하는 것은 좋지 않다는 것

float해제 방법3 - overflow(visible 제외)를 이용한 해제

여러 가지 해제 방법 중에 가장 간단한 방법

• float이 된 부모 요소에게 visible을 제외한 overflow를 부여하면 됨

<div class="box_wrap">
  <div class="box_parent">
    <div class="box box1">box1</div>
    <div class="box box2">box2</div>
  </div>
</div>

.box_wrap {
  width: 400px;
  margin: 0 auto;
}
.box_parent {
  overflow: hidden; /* 부모요소에게 overflow (visible 제외) 부여 */
  border: 3px dotted blue;
  padding: 10px; 
}
.box {
  width: 100px;
  height: 100px;
  color: #fff;
  text-align: center;
}
.box1 {
  float: left;
  background-color: green;
}
.box2 {
  float: right;
  height: 100px;
  background-color: pink;
}

• 위와 같은 방법으로 아주 간단한 코드 한 줄을 추가하여 float의 상황에서 벗어날 수 있음
• 하지만 이 방법에도 치명적인 단점이 있습니다. 만약 이 부모 요소 안에 부모의 영역을 벗어나는 팝업과 같은 자식 콘텐츠가 있다고 가정한다면 그 팝업의 내용이 보이지 않는 현상이 일어남
• overflow의 유일하고 가장 큰 단점 중에 하나
• 그래서 이 방법을 사용하여 float을 해제할 때는 이처럼 안에 내용 중에 부모의 내용을 넘쳐나서 노출되는 콘텐츠는 없는지 확인이 될 때 사용하여야 함

float해제 방법4 - 인접 형제요소의 clear 속성을 이용한 해제

인접 형제 요소의 clear를 부여하는 방법. clear 속성은 float의 흐름을 끊기 위한 float 해제 전용 속성이라고 보시면 됨.
설명에 앞서 clear 속성의 값을 잠깐 설명하자면 clear는 left, right, both, none 등의 속성값을 가지고 있음. 이는 각각 float의 left를 해제, right를 해제, 그리고 방향에 상관없이 좌우 모두일 때 해제, 그리고 해제를 하지 않을 때 사용.

• 이 그림을 보시게 되면 마크업의 순서로 보자면 자식 요소가 box1, box2, 빈 span의 순서로 되어 있음. box1,2는 좌우로 플롯팅이 되어 있는 상태이고 그와 인접해있는 형제 요소인 빈 태그에 clear:both 속성이 부여되었음.

• clear 속성을 사용하기 위해서는 요소가 블록 레벨 요소여야 가능. 이미지의 예시처럼 만약 인접 태그가 span 일 경우에는 display: block 속성을 주어 해당 태그를 블록 레벨로 변경해줘야 함.

<div class="box_wrap">
  <div class="box_parent">
    <div class="box box1">box1</div>
    <div class="box box2">box2</div>
    <div class="clear"></div>
  </div>
</div>

.box_wrap {
  width: 400px;
  margin: 0 auto;
}
.box_parent {
  border: 3px dotted blue;
  padding: 10px;
  
}
.box {
  width: 100px;
  height: 100px;
  color: #fff;
  text-align: center;
}
.box1 {
  float: left;
  background-color: green;
}
.box2 {
  float: right;
  height: 100px;
  background-color: pink;
}
.clear {
  clear: both;
}

• 이와 같은 방법은 clear라는 float을 해제시키는 전용 속성을 이용하여 가장 깔끔한 플롯의 해제를 할 수 있음
• 하지만 이를 위해서는 아무런 의미가 없는 빈 태그를 이용해야 하기 때문에 시맨틱적인 요소에선 불필요한 요소가 생기는 것이기 때문에 조금 번잡하다는 단점이 있음.

float해제 방법5 - 가상요소를 이용한 clear 속성을 이용한 해제

• 4번째에 설명한 빈 태그를 이용한 clear 해제가 불필요한 태그를 이용한다는 단점을 보완할 수 있는 해제 방법.
  
• 4번 해제 방법과 비교한다면 빈 태그로 오는 부분이 :after를 이용하여 가상 요소로 구성된 것을 알 수 있음

<div class="box_wrap">
  <div class="box_parent">
    <div class="box box1">box1</div>
    <div class="box box2">box2</div>
  </div>
</div>

.box_wrap {
  width: 400px;
  margin: 0 auto;
}
.box_parent {
  border: 3px dotted blue;
  padding: 10px;
}
.box {
  width: 100px;
  height: 100px;
  color: #fff;
  text-align: center;
}
.box1 {
  float: left;
  background-color: green;
}
.box2 {
  float: right;
  height: 100px;
  background-color: pink;
}
.box_parent:after { /* :after를 이용하여 인접요소로 구성하여 해제 */
  display: block;
  clear: both;
  content: '';
}

• css를 코드를 보게 되면 부모 요소에 :after를 이용하여 자식 요소들 중에서 가장 마지막에 위치하도록 해주었음. 그 뒤에 블록 요소로 만들어주고 clear 해제를 해줌. 마지막으로 가상 요소는 content 요소가 필수이기 때문에 "" 이처럼 빈 내용을 주어 빈 태그를 넣어준 것과 같은 효과를 만들어줌.

• 이 해제 방법은 앞서 배운 overflow hidden을 사용하는 방법과 같이 팝업과 같은 콘텐츠를 벗어나는 경우에도 대응이 되며, 콘텐츠의 높이 값이나 사이즈의 변화에도 유연한 대응이 됨

• 지금까지의 해제 방법으로 보편적으로 가장 많이 사용하고 있는 해제 방법 중에 하나