[css] 자식요소가 float / absolute 일 때 부모 요소 height, width 주기

 

 

자식 요소가 float일 때

자식 요소가 float 되어 있으면 (말 그대로 자식 요소가 떠 있는 상태이기 때문에) 부모 요소(상위 요소)의 height가 0이 될 수 있다. 이 때 주요 해결방법은 두가지이다. 사실 첫번째 방법으로 어지간하면 해결 가능.

 

 

• 부모 요소에 overflow:hidden

   .parent{
                overflow: hidden; /* 또는 overflow: auto; */
            }

 

 

• 부모 요소의 가상 선택자에 clear:both

    .parent::after {
                content: "";
                display: block;
                clear: both;
            }

 

 

자식 요소가 position : absolute 일 때

 

부모 요소와 자식 요소의 크기가 같아야 하는데 자식 요소가 position:absolute 일 때 (예를들어 이미지) 가끔 부모 요소보다 작아지는 경우가 있다. 이 때 해결 방법.

 

 

• 자식 요소에 100%

    .child{
            position:absolute;
            top:0; /* 경우에 따라 필요해질 수 있음 */
        width: 100%;
            height:100%;
    }

 

 

• 상우하좌에 0 주기

    .child{
            position:absolute;
            top:0;
        left:0;
        bottom:0;
        right:0;
    }