Float 요소 정렬

why?

float 프로퍼티는 레이아웃 구성할 때 블록 레벨 요소를 가로 정렬하기 위해 사용한다. 사실 flexbox레이아웃을 사용하면 더 간단히 레이아웃할 수 있다. 하지만 flexbox레이아웃을 지원하지 않는 IE를 고려하면 float 프로퍼티를 알고 레이아웃 짤 때 사용해야 한다.

원래 float 프로퍼티는 해당 요소를 floating하게 만드는 것이다. 요소가 페이지 왼쪽이나 오른쪽에 떠다니게 하는 것이다. 때문에 float 프로퍼티를 사용할 때 요소의 위치를 고정시키는 position프로퍼티의 absolute를 사용하면 안된다.

정렬

float 프로퍼티를 사용하지 않은 블록 요소들은 수직으로 정렬된다. float:left; 프로퍼티를 사용하면 왼쪽부터 가로 정렬되고, float:right; 프로퍼티를 사용하면 오른쪽부터 가로 정렬된다.

오른쪽 가로 정렬의 경우, 먼저 기술된 요소가 가장 오른쪽에 출력되므로 출력 순서가 역순이 된다.

주의
떠다니는 요소는 width가 있어야한다.
Otherwise, the element will assume the full width of its containing element, and changing the float value will not yield any visible results.

Clear

The float property can also be used to float multiple elements at once. However, when multiple floated elements have different heights, it can affect their layout on the page. Specifically, elements can “bump” into each other and not allow other elements to properly move to the left or right.

The clear property specifies how elements should behave when they bump into each other on the page. It can take on one of the following values:

  1. left — the left side of the element will not touch any other element within the same containing element.
  2. right — the right side of the element will not touch any other element within the same containing element.
  3. both — neither side of the element will touch any other element within the same containing element.
  4. none — the element can touch either side.

참고

코드아카데미

https://www.youtube.com/watch?v=qSGXLWKOXHM (생코)

https://www.youtube.com/watch?v=8XhTB__2eSs (생코)

[https://poiemaweb.com/css3-float#22-float-%ED%94%84%EB%A1%9C%ED%8D%BC%ED%8B%B0%EB%A5%BC-%EA%B0%80%EC%A7%84-%EC%9E%90%EC%8B%9D-%EC%9A%94%EC%86%8C%EB%A5%BC-%ED%8F%AC%ED%95%A8%ED%95%98%EB%8A%94-%EB%B6%80%EB%AA%A8-%EC%9A%94%EC%86%8C%EC%9D%98-%EB%86%92%EC%9D%B4%EA%B0%80-%EC%A0%95%EC%83%81%EC%A0%81%EC%9C%BC%EB%A1%9C-%EB%B0%98%EC%98%81%EB%90%98%EC%A7%80-%EC%95%8A%EB%8A%94-%EB%AC%B8%EC%A0%9C