float을 걸고 나서 해제를 할 떄
float 다음 요소가 온다면 그냥 both:clear;를 주면 되지만
만약에 float이 마지막 요소여서 clear를 걸어줄
다음 요소가 존재하지 않는 경우...

1. 아무 요소도 없는 빈 태그를 하나 아래에 배치하고
   clear:both를 걸어서 해제할 수 있습니다.

   .endpoint {
              clear: both;
          }
          

2. 가상요소::after를 사용해서
   가상의 박스를 추가로 생성해 해제해줍니다.

          ```
     #container:after {
           content:"";
           clear: both;
           display: block;
       }

3. 노가다로 #cotainer height를 조정합니다.

• {
  margin:0px; padding: 0px;
  }

  body {
  font: 12px "굴림", Gulim;
  margin: 20px;
  }
  #container {
  width: 600px;
  padding: 10px;
  background: #fdd;
  border: 5px solid #caa;
  }

  h1 {text-align: center; padding: 10px;}
  p { text-align: justify;}

  #container:after {
  content:"";
  clear: both;
  display: block;
  }

    .green {
        width: 250px;
        float: left;
        background: greenyellow;
        margin: 10px;
    }

    .coffee {
        width: 250px;
        float: right;
        background: chocolate;
        margin: 10px;
    }
    /*
    #container의 가장 마지막 태그가 있는 것처럼 간주
    기본적으로 가상태그는inline 속성을 가지므로
    display:block을 걸어서block을 태그화 시켜준 다음
    both:clear;를 걸어 해제해주면 됩니다.
    */

display는 인라인태그를 블록태그로 만들어주거나
블록태그를 인라인태그로 만들어주거나
혹은 태그요소 자체를 화면에 보이지 않게(코드에는 존재)
만들어주는 역할을 합니다.
        display:block;  -태그를 블록속성으로 전환(줄바꿈)
        display:inline; - 태그를 인라인속성으로 전환(가로나열)
        display:inline-block; -태그를 인라인 요소로 만들어주지만
        블록 요소에서 쓸 수 있는 옵션(width, height, padding등)
        을 쓸 수 있도록 허용
        display:none; - 해당요소는 화면에 노출시키지 않음

    * {
        margin: 0px; padding: 0px;
    }

    body {
        font:12px "굴림", Gulim;
        margin: 20px;
    }

    #gnb li {
        display: inline;
    }

    #gnb li a {
        display: inline-block;
        width: 100px;
        background: #c00;
        color:#fff;
        height:23px;
        font-size:150%;
        padding-top: 10px;
        text-align: center;
    }

    #gnb li a:hover {
        background-color: bisque;
    }
    

</style>
<meta charset="UTF-8"> 
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>