[HTML/CSS] 레이아웃 만들기 1 : 호환성 좋은 float

🐳Coding apple HTML/CSS All-in-one : 기초부터 Bootstrap, SASS, 고급 animation 까지 강의를 보고 정리한 글입니다 🐳

💫 float 속성

div 박스가 옆으로 오지 않고 아래로 내려갈 때 사용
요소를 공중에 띄워 왼쪽/오른쪽 정렬

<div>
  <div class="left-box"></div>
  <div class="right-box"></div>
</div>

.left-box {
  width : 100px; 
  height : 100px;
  float : left;
}
.right-box {
  width : 100px; 
  height : 100px;
  float : left;
}

float 속성으로 가로 정렬할 땐 영상처럼 float 박스들을 싸매는 하나의 큰 div 박스를 만들고 폭을 지정 해 주는 것이 좋다.
 

💫 clear 속성

float 속성을 사용 한 뒤 사용
요소를 공중에 띄워 왼쪽/오른쪽 정렬

<div>
  <div class="left-box"></div>
  <div class="right-box"></div>
  <div class="footer"></div>
</div>

.footer {
  clear : both
}

clear 속성을 사용하면 float 다음에 오는 박스들이 제자리를 찾게 된다.