float이 끼치는 영향
- float의 해제를 하기 위해서는 먼저 float의 특성을 알아야 합니다. 우리가 흔히 플롯의 상황에서 해제가 필요하다고 할만한 상황은 아래의 내용과 같은 float의 특성 때문에 발생하게 됩니다.
]
부모요소 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;
}위의 주석 내용과 같이 두 자식인 .box의 높이 값이 100px로 고정일 경우에 부모인 .box_parent에게 똑같은 높이 값인 100px을 부여함으로써 float의 영향에서 벗어난 것처럼 할 수 있습니다.
하지만 이는 전체의 흐름을 방해하지 않도록 하는 방법일 뿐 정확하게는 플롯이 해제된 것처럼 보이는 눈속임과 같은 해제 방법이라고 할 수 있습니다. 예를 들어 여기 box2의 높이 값을 200px로 바꾼다면 부모의 높이 값도 고정이기 때문에 이처럼 자식 요소가 넘치는 현상이 일어나게 됩니다.
결론적으로 이 방법은 자식 요소가 고정된 높이 값을 가지며 부모 역시 고정된 높이 값을 가진 경우에만 사용할 수 있을 것입니다.
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을 해제할 때는 이처럼 안에 내용 중에 부모의 내용을 넘쳐나서 노출되는 콘텐츠는 없는지 확인이 될 때 사용하여야 합니다.
가상요소를 이용한 clear 속성을 이용한 해제
<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을 사용하는 방법과 같이 팝업과 같은 콘텐츠를 벗어나는 경우에도 대응이 되며, 콘텐츠의 높이 값이나 사이즈의 변화에도 유연한 대응이 됩니다.
