CSS : 플롯 Float

요즘은 사용하지 않는 Syntax이나 웹디자인 기능사 시험에는 출재되므로 기록.

원리

1. 요소의 정렬방향을 선택
2. 각 요소들은 정렬방향으로 달려든다.
3. 요소의 부모요소까지 float에 먹혀들어 크기가 사라진다.
4. 크기를 살리기 위해서는 부모요소의 뒤에 종료 clear를 필수로 사용해야한다.

개념

신텍스 : 방향 설정;

시작
float신텍스: left방향;
종료
clear신텍스: both방향;

예제

📝HTML

    <ul class="portfolio_list">
      <li>
        <img src="https://via.placeholder.com/200" alt="" />
      </li>
      <li>
        <img src="https://via.placeholder.com/200" alt="" />
      </li>
      <li>
        <img src="https://via.placeholder.com/200" alt="" />
      </li>
      <li>
        <img src="https://via.placeholder.com/200" alt="" />
      </li>
    </ul>

🌈CSS

      .portfolio_list {
        width: 860px;
        margin: 0 auto;
        padding: 10px;
        background-color: antiquewhite;
      }
      .portfolio_list li {
        float: left;
        margin-right: 20px;
        list-style: none;
      }
      .portfolio_list :last-child {
        margin-right: 0;
      }
      .portfolio_list::after {
        content: "";
        clear: both;
        display: block;
      }

💻화면

비고

float을 종료할때 ::before이 아닌 ::after를 했을 때는 clear가 적용되지 않아서 크기가 잡히지 않는다.