float속성 사용시 배경이 없어지는 경우

CSS 에서 float 속성 사용할 경우 잘 나오던 배경이 사라지는 경우가 있습니다.

예를 들어

CSS 예제1
.wrap {width:500px; background-color:red;}
.left {float:left; width:250px;}
.right {float:right; width:250px;}

코딩 예제1
<div class="wrap">

<div class="left">왼쪽</div>
<div class="right">오른쪽</div>

</div>

위와 같이 두개로 분리한 영역을 감싸는 영역의 배경이 사라지는 경우죠~

이런 현상은 class="wrap" 이 적용된 영역의 높이가 0px 로 인식도기 때문에 보이지 않는 경우인데..
이유는 float 란 녀석의 속성때문에 그렇습니다.

float란 속성은 div 뿐 아니라 대부분의 코드에 적용가능한 속성인데..
이 속성이 있는 코드들끼리 영향을 주고 받습니다.

즉 위 예제에서 본다면 wrap 과 left, right 는 서로 영향을 미치지 않기 때문에 wrap 속에 left, right가 있더라도 높이가 0이 되는 것이죠.
이 문제를 해결하려면 float 영향을 받아야 하는 코드에 float 속성을 함께 써 주면되겠죠.
불필요한 곳에  float 를 사용하면서 틀어질 수 있는 그리드는 clear:both; 속성으로 방지해 주면됩니다.

아래에 변경된 예제입니다.

CSS 예제2
.wrap {float:left; width:500px; background-color:red;}
.left {clear:both; float:left; width:250px;}
.right {float:right; width:250px;}

코딩 예제2
<div class="wrap">

<div class="left">왼쪽</div>
<div class="right">오른쪽</div>

</div>