[javascript] 요소를 공중에 띄우는 float 속성

요소를 공중에 띄워 왼쪽/오른쪽에 정렬하는 float 속성

<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를 쓰면 요소를 붕 띄우다보니 그 다음에 오는 HTML 요소들이 제자리를 찾지 못합니다.
(참고) float 속성으로 가로정렬할 땐
영상처럼 float 박스들을 싸매는 하나의 큰 div 박스를 만들고 폭을 지정해주는게 좋습니다.
그래야 모바일에서 안 흘러넘침

float를 쓰고 나면 항상 clear 속성이 필요합니다.

<div>
  <div class="left-box"></div>
  <div class="right-box"></div>
  <div class="footer"></div>
</div>
.footer {
  clear : both
}

clear 속성을 사용하면 float 다음에 오는 박스들이 제자리를 찾게 됩니다.
float썼으면 까먹지 말고 항상 넣으시면 됩니다.
안넣으시면 내 의도와는 다른 레이아웃이 반겨줄 것입니다.
참고로 float : none 이것도 추가해주는게 나중에 생길 버그예방차원에서도 좋을 수 있습니다.