가변형 높이를 가지는 방법

가변형 높이를 가지는 방법  -> 높이가 상황에 따라 변해야 하는 경우

 

첫 번째 방법!

  1. 빈 박스 추가( float 되고 있는 박스들 맨 끝 아래)

  2.  {clear : both} 를 준다

 

 

두 번째 방법!!

#main : after {                                    ---------------> span태그가 추가되었다고 생각할 수 있다.

                    content : "  " ;                ---------------> 글씨를 쓰면 content에 나오지만 리더기에는 나오지 않는다.

                    clear : both ; 

                    display : block ;

                  }

 

      ------------------------------------------> 불필요한 태그를 만들지 않아도 된다

                                                           ex6 이하에서는 사용불가

 

세번째 방법!!!

 

  조건 : 반드시 자식 요소가 float 상태

          부모 요소에는 height 사용 안 함

 

#main { 

           overflow : hidden ; 

          }                                      --------------> 조건이 충족하면 뜻이 바뀐다.

                                                                    float 된 아이들의 높이를 읽어라

 

       주의! 서브메뉴에서 사용 시 서브메뉴가 나타나지 않을 수 있다 주의할 것

 

평소에는  height 주면서 사용하면 된다.