float

 

float은 

한 요소(element)가 보통의 흐름으로부터 빠져나와 

텍스트 및 인라인 요소가 컨테이너의 좌우측을 따라 배치되는 것을 지정한다.

 

일반적인 정렬과는 다르게 float 정렬된 것 주위로 다른 컨텐츠가 흐르듯이 배치가 된다.

 

이렇게 흐르는 듯한 배치가 가능함으로 사이트를 레이아웃할 때도 사용한다. 

 

 

 

문법

---

/* Keyword values */
float: left;
float: right;
float: none;
float: inline-start;
float: inline-end;

/* Global values */
float: inherit;
float: initial;
float: unset;

 

 

 

값

left

는 요소가 자신의 포함(containing) 블록의 좌측에 부동(float, 떠움직여)해야 함을 나타내는 키워드이다.

 

right

는 요소가 자신의 포함 블록의 우측에 부동해야 함을 나타내는 키워드이다.

 

none

는 요소가 부동하지 않아야 함을 나타내는 키워드이다.

 

inline-start

는 요소가 자신의 포함 블록의 시작쪽에 부동해야 함을 나타내는 키워드이다. 즉, ltr(left to right) 스크립트 상에서 왼쪽 그리고 rtl(right to left) 스크립트 상에서는 오른쪽.

 

inline-end

는 요소가 자신의 포함 블록의 끝쪽에 부동해야 함을 나타내는 키워드입니다. 즉, ltr 스크립트 상에서 오른쪽 그리고 rtl 스크립트 상에서는 왼쪽.

 

 

 

float 위치 지정되는 법

---

요소가 부동되면 문서의 일반적인 흐름에서 빠진다.

부동된 요소는 포함박스나 다른 부동된 요소의 가장자리에 닿을 때까지 좌나 우로 이동된다.

 

 

 

float 지우기

---

 플로팅한 요소는 문서의 흐름상에서 벗어난 상태이기 때문에 레이아웃을 무너뜨리게 되는 현상을 보게 될 것이다.

이는 플롯을 사용하면 발생되는 현상이며 이러한 문제를 해결하기 위해서는 float해제를 해 주어야 한다.

 

여기서 "float 을 해제한다" 는 의미는 float 이 적용된 요소를 해제하는 것이 아니라

clear 속성을 적용해 float의 영향을 받지 않도록 한다는 의미이다. 

 

 

float 해제 첫번째 방법. clearfix

---

 

플롯을 해제하는 방법 중에 전 세계적으로 통용되는 이름(관용적인 기법의 이름)으로 

 

clearfix 라는 방법이 있다. 

 

물론 clear 속성을 적용하기보다 다른 방법으로 플롯을 해제할 수는 있으나 

float을 사용해 레이아웃을 잡다보면 clear가 필요해지기 때문에 가급적 플롯된 요소의 부모 요소에

clearfix방법을 적용하는 것을 권장하고 있다.

 

다시 말해, float이 적용된 자식 요소를 부모 요소가 감싸 안지 못하는 현상을 해결하기 위해서는 대략적으로 6가지 방법이 있는데, 

그 중 대표적으로 많이 사용 되는 방법이 clearfix이다.

 

즉, clearfix 방법은 무조건이라기 보다 필요에 의해서 사용하는 것이다. 

 

.clearfix {
	clear: value;
}

 

 

clear의 속성값은 다음과 같다.

 

• left: 왼쪽에 floating된 요소를 지정 해제
• right: 오른쪽에 floating된 요소를 지정 해제
• both: 왼쪽 오른쪽 모두 floating된 요소를 지정 해제
• none: 기본값(default), floating을 해제하지 않음.

 

 

 

float 해제 두번째 방법. inline-block

---

 

이 방법 역시 부모 요소에 적용하는데 display: inline-block 속성을 사용하는 방법이 있다.

부모 요소는 자식요소의 높이를 인지하게 되지만

부모요소에 정의된 인라인블록 속성 특성 때문에 본인 영역만큼만 너비를 가지게 된다.

 

.parent {display: inline-block;}

 

 

 

float 해제 세번째 방법. overflow: hidden;

---

세번째 방법으로 플롯을 해제할 수 있는 속성은 overflow: hidden; 방식이다.

이 속성 역시도 부모요소에 적용해야하며, 이 속성의 특징은 자식 요소가 부모 요소 박스보다 클 경우에 자식 요소 박스의 콘텐츠를 숨기고 보이지 않게 해주는 속성이다. 

 

overflow: auto; 를 적용해도 되지만 자식 요소 박스의 너비가 부모요소 박스의 너비보다 클 경우에 스크롤이 생기기 때문에 권장하진 않는다.

넘치는 콘텐츠를 숨긴다는 의미는 부모 요소 박스가 그 자식 요소 콘텐츠를 숨긴다는 것이다. 

 

 

**

참고로 overflow:hidden; 속성을 적용하는 방법은 권장되지는 않습니다.

예를 들어, 동적(스크립팅)으로 자식, 자손 요소들 중에서 부모 요소 박스를 벗어나서 보여주어야 될 경우에 hidden 값으로 인해 보여주고자 하는 콘텐츠를 보여줄 수 없게 되기 때문에 잘 판단하여 선택적으로 사용해야 합니다.

출처: https://webclub.tistory.com/606 [Web Club]

 

 

 

 

출처: mdn,

https://includestdio.tistory.com/34