프로그래밍/웹관련
[CSS] 'float'속성 사용 시 부모 크기를 자동으로 설정하기
2014. 9. 5. 15:00

html을 작성하다보면 자주 사용 하는 것 중에 하나가 'float'속성입니다.

그런데 'float'속성의 특징은 다른 레이아웃에 영향을 주지 않는 것이죠.

 

 

0. 테스트용 코드 작성

테스트용 html을 다음과 같이 작성합니다.

<!DOCTYPE html>
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
 
    <style>
        .Parent
        {
            background-color:aqua;
        }
 
        .Child1
        {
            background-color:yellow;
 
            width:300px;
            height:300px;
        }
        
        .Child2
        {
            background-color:red;
 
            width:200px;
            height:200px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <div style="background-color:gray">
                aaaaaaaaaaaaaaa
            </div>
        </div>
        <div class="Parent">
            <div class="Child1">
                bbbbbbbbbbbbbbb
            </div>
            <div class="Child2">
                ccccccccccccccc
            </div>
        </div>
    </form>
</body>
</html>

 

이 코드를 실행하면 다음과 같이 나옵니다.

 

 

1. 문제

이제 '.Child1'과 '.Child2'에  'float'을 추가해 봅시다.

.Child1
{
    background-color:yellow;
 
    width:300px;
    height:300px;
 
    float:left;
}
        
.Child2
{
    background-color:red;
 
    width:200px;
    height:200px;
 
    float:left;
}

 

이제 코드를 실행하면 다음과 같이 나옵니다.

 

'float'속성을 추가하자 부모의 색인 아쿠아색이 없어진 것을 알 수 있습니다.

이것은 'float'속성이 기본적으로 다른 레이아웃에 영향을 주지 않기 때문에 그렇습니다.

 

기존 코드의 '<div class="Parent">'의 닫는 태그 밑에 'div'를 추가한후 '.Parent'에 '마진-바텀(margin-bottom)'을 추가해 보면 어떤 문제인지 확실하게 보이죠.

 

이러다 보니 부모 'div'를 기준으로 무언가 작업을 하게 되면 자식 'div'의 크기가 반영되지 않아 레이아웃이 이상하게 됩니다.

 

 

2. 해결하기

이 문제를 해결하기 위한 간단한 방법은 부모 'div'에 'display:inline-block'를 추가하는 것입니다.

.Parent
{
    background-color:aqua;
 
    display:inline-block;
}

 

 

이렇게 추가만 하면 자식의 크기가 부모한테 반영됩니다.

 

다시 아쿠아(하늘)색이 보이이기 시작합니다!!

 

 

마무리

그런데 'display:inline-block'를 추가하면 레이아웃에 문제 생기는 곳이 있던 거 같은데....

잘 기억이 나지 않습니다 ㅋㅋㅋㅋㅋㅋㅋ

아마도 다른 태그랑 섞여서 그랬던 거 같기도 해서 잘 모르겠네요.

어찌 됐건 'float'을 사용할 때는 별일 없으면 'display:inline-block'를 미리 추가해두는게 나중을 위해서 좋긴 합니다.

티스토리툴바