[CSS] div 왼쪽으로 정렬하고 싶을 때 (float)

 

div를 이용하여 레이아웃을 만들때, 왼쪽으로 정렬하고 싶은 경우가 있다

이때 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박스로 가로정렬할 때는 div로 감싸고 폭을 지정해줘야 모바일에서 안흘러넘친다

 

 

그래서 float를 사용한 뒤  clear 속성을 사용해서 다음에 오는 박스들이 제자리를 찾게 된다

+ float : none 을 추가해주는 것도 좋다

 

 

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

.footer {
  clear : both
}