CSS 레이아웃 - float 속성

CSS - float 속성

CSS 속성(property) float 은 웹 페이지의 배치 및 레이아웃에 사용된다.

한 요소(element)가 보통 흐름(normal flow)으로부터 빠져 텍스트 및 인라인(inline) 요소가 그 주위를 감싸는 자기 컨테이너의 좌우측을 따라 배치되어야 함을 지정

float은 block 레이아웃이기 때문에, 경우에따라 display 계산 값을 수정한다.

 

지정값	계산값
inline	block
inline-block	block
inline-table	table
table-row	block
table-row-group	block
table-column	block
table-column-group	block
table-cell	block
table-cation	block
table-header-group	block
table-footer-group	block
flex	flex ( float은 효과 없음 )
inline-flex	inline-flex ( float은 효과 없음 )
그외	변화없음

 

---

주의: JavaScript에서 이 속성을 element.style 객체의 멤버로서 참조한다면,  cssFloat으로 철자를 써야 합니다. 또한 Internet Explorer 8 이전 버전에서는 styleFloat으로 썼음을 주의하세요. 이는 DOM 멤버의 이름은 dash(-)로 구분된 CSS 이름의 카멜케이스(camel-case) 명이다는 규칙의 예외(이고 "class"는 "className"으로 의 "for"는 "htmlFor"로 이스케이프할 필요와 같이 "float"이 JavaScript에서 예약어란 사실 때문)입니다.

---

 

값

• left

  left는 요소가 자신을 포함하고 블록의 좌측에 부동해야 함
  

   

• right

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

   

• none

  기본값 . 요소가 부동하지 않아야 함을 나타내는 키워드  (텍스트에서 나타나는 위치에 표시)

   

• inline-start

   요소가 자신의 포함 블록의 시작쪽에 부동해야 함을 나타내는 키워드입니다.

  즉, ltr(left to right) 스크립트 상에서 왼쪽 그리고 rtl(right to left) 스크립트 상에서는 오른쪽

   

• inline-end

  요소가 자신의 포함 블록의 끝쪽에 부동해야 함을 나타내는 키워드

  즉, ltr 스크립트 상에서 오른쪽 그리고 rtl 스크립트 상에서는 왼쪽.

 

형식구문

left | right | none | inline-start | inline-end

float 위치 지정

요소가 부동되면 문서의 보통 흐름에서 빠집니다. 부동된 요소는 포함 박스나 다른 부동된 요소의 가장자리(edge)에 닿을 때까지 좌나 우로 이동됩니다.

 

float 지우기

 float을 지우는 가장 간단한 방법은 우리가 왼쪽으로 정렬되는 지 확인하고 싶은 새 머릿글에 clear 속성을 추가하는 것

h2.secondHeading { clear: both; }

그러나, 이 방법은 우리가 머릿글이 가로로 옆에 계속 보이기를 원하는 같은 블록 형식 문맥(block formatting context) 내에 다른 요소가 없을 때만 동작합니다. 우리 h2 좌우로 부동되는 사이드바(sidebar)인 형제(sibling)가 있다면, clear 사용은 강제로 머릿글이 두 사이드바 아래로 나타나게 하고 이는 아마 우리가 원하는 게 아닙니다.

 

아래 요소의 float을 지우는 게 선택사항이 아니라면, 다른 방법(approach)은 부동 요소가 담긴 컨테이너의 블록 형식 문맥을 제한하는 겁니다. 다시 위 예제를 참조하면, 빨간 박스 셋은 모두 p 요소 내에 있는 걸로 보입니다. 우리는 박스를 포함하도록 늘어나지만, 그 하단 밖(밑)으로 사라지지 않게 hidden 혹은 auto 로 p의 overflow 속성을 설정할 수 있습니다:

p.withRedBoxes { overflow: hidden; height: auto; }

 

---

주의: overflow 를 scroll 로 설정하면 부동된 모든 자식(child) 요소도 포함합니다. 하지만 스크롤바가 콘텐츠의 높이에 상관없이 보입니다. 그 컨테이너가 콘텐츠를 수용하기 위해 늘어야(grow) 함을 나타내는 기본(default)임에도 불구하고, 여기에서 우리는 height 를 auto 로 설정하고 있습니다.

---

 

clearfix 해킹

요소가 포함 된 요소보다 크고 떠 다니는 경우 해당 요소가 컨테이너 외부에서 "오버플로"됩니다.

그런 다음 overflow: auto;이 요소를 포함하여이 문제를 해결할 수 있습니다.

예

.clearfix { overflow: auto; }

overflow: auto당신이 당신의 마진과 패딩 (다른 사람이 스크롤바를 볼 수 있습니다)의 제어를 유지할 수 있습니다로 clearfix 긴으로 잘 작동합니다. 그러나 새롭고 현대적인 clearfix 해킹 은 사용하는 것이 더 안전하며 다음 코드가 대부분의 웹 페이지에 사용됩니다 .

예

.clearfix::after { content: ""; clear: both; display: table; }

참고 링크 - https://developer.mozilla.org/ko/docs/Web/CSS/float