레이아웃 float에 대해 알아보자

Float

 

float는 그대로 번역하자면 '띄우다'라는 뜻입니다. float는 css에서 정렬하기 위해 사용되는 속성입니다.

예를 들어, 문서에 사진과 그림이 있을 때, 그림을 왼쪽이나 오른쪽으로 띄워서 정렬하거나

각 객체를 오른쪽이나 왼쪽으로 정렬하여 전체 문서를 배치(layout) 할 때도 사용할 수 있습니다.

 

 

 

클릭시 이미지 출처로 이동합니다.

 

 

 

 

Float 속성 값

• none : 요소를 띄우지 않음 (기본값)
• left : 요소를 왼쪽에 띄움
• right : 요소를 오른쪽에 띄움
• initial : 기본값으로 설정함
• inherit : 부모 요소로부터 상속함

 

 

 

Float 해제(clear)

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

< 기본 원리 > 

• 'float: left' 를 해제하려 한다면, 해제되길 원하는 요소 css에 'clear : left:' 를 삽입한다.
• float: right 이라면 clear: right 을 사용
• 두 가지 경우를 그때그때 따라가기 번거로우므로 clear: both' 를 사용한다.

해제 가능한 방법

1. 형제 요소에 `clear: (left, right, both)` 추가하여 해제

2. 부모 요소에 `overflow : (hidden, auto)` 추가하여 해제

3. 부모 요소에 `clearfix` 클래스 추가하여 해제 (제일 좋은 방법)

 

 

 

 

 

Float 속성 사용법

 

• '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'에서는 속성 변화가 없다.