Float 기본 내용 정리

Float

 

• 요소를 좌우 방향으로 띄움(수평 정렬)

• css3에는 flex box가 도입됨 (flexible box)

• 최근 트렌드는 flex를 사용하는 편임

  
  
  

속성 값

 

• none : 요소 띄움 없음 (기본값)

• left : 왼쪽으로 띄움

• right : 오른쪽으로 띄움

• 신문 기사처럼 요소에 float 속성을 적용하면, 적용된 요소 주변으로 문자(text)가 흐르게 된다.

  반면, 새롭게 만드는 요소가 겹치는 경우가 있다.

Float Right

- `float : right;` 은 우측 정렬과는 다르다. 순서가 뒤바뀜 - 요소 순서대로 우측에서 쌓기 시작하는 개념으로 이해하면 됨

해제(clear)

- `float` 속성이 적용되지 않도록 지정(해제)

### 기본 원리
- `float: left`를 해제하려 한다면, 해제되길 원하는 요소 css에 `clear : left;`를 삽입한다.

• float: right 이라면 clear: right 을 사용

• 두 가지 경우를 그때그때 따라가기 번거로우므로 clear: both' 를 사용한다.

해제 가능한 방법들

1. 형제 요소에 `clear: (left, right, both)` 추가하여 해제 2. 부모 요소에 `overflow : (hidden, auto)` 추가하여 해제 3. 부모 요소에 `clearfix` 클래스 추가하여 해제(추천!)

결점들

- 1번 방법을 사용하면 늘 형제 요소가 마지막에 있어야 함.(clear를 붙여줘야 하기 때문에)

- 2번 방법에서 overflow는 float과 아무 관련이 없는 속성임. 일종의 편법을 사용하는 것

3번 사용법

- `float` 속성이 추가된 요소의 부모요소에 미리 지정된 `clearfix` 클래스를 추가

• <div class="parent clearfix">
    <div class="child"></div>
    <div class="child"></div>
  </div>

• .clearfix::after {
      content: ""; /* 가상 요소를 쓰면 콘텐트 요소가 필수 */
      clear : both;
      display : block; /* or "table" */
  }
  .child {
      float: left;
  }

• 단, clearfix 가 있는 요소의 자식요소는 무조건 float 속성을 가지고 있어야 한다.

display 수정

- `float` 속성이 추가된 요소는 `display` 속성의 값이 대부분 `block` 으로 수정됨 - `flex`에서는 속성 변화가 없다.