CSS_Experience 교환의 Float 관련 기술 문서

Float의 개념은 아마도 CSS에서 가장 혼란스러운 개념일 것입니다. Float는 모든 상황별 요소를 플로팅함으로써 발생하는 가독성 및 사용성 문제로 인해 종종 오해되고 비판됩니다. 그러나 이러한 문제의 근본 원인은 이론 자체가 아니라 개발자와 브라우저의 이론 해석에 있습니다.

플로팅 개념을 주의 깊게 읽어보면 생각보다 복잡하지 않다는 것을 알 수 있습니다. 대부분의 문제는 이전 버전의 IE로 인해 발생합니다(그저 추측일 뿐입니다). 이러한 버그를 알고 있으면 이러한 문제를 피할 수 있습니다.

이러한 문제를 해결하고 부동 소수점 사용에 대한 이전 오해를 바로잡아 보겠습니다. 우리는 수십 개의 관련 기사를 참고하고 귀하가 알아야 할 가장 중요한 기사를 선택했습니다.

플로트에 대해 알아야 할 사항
----------------------------------- - ------------------------------------------------- - ----------------------

　 "주변의 이미지와 텍스트의 실천은 아주 오래전으로 거슬러 올라갑니다. 1. 이 기능은 브라우저에 처음 도입되었으며, CSS가 이를 구현하기 위해 float 속성을 사용하는 이유는 Netscape 1.1과 함께 발표된 'Additions to HTML 2.0' 문서에서 참조되며, 부동 요소를 설명합니다. "플로팅 요소의 위치는 여전히 일반적인 문서 흐름을 기반으로 하며, 이후 문서 흐름에서 추출되어 최대한 왼쪽 또는 오른쪽으로 이동됩니다. 플로팅 요소 주위. 요소가 추출될 때 일반적인 문서 흐름에서 여전히 문서 흐름에 있는 다른 요소는 요소를 무시하고 원래 공간을 채웁니다. "

" 요소는 부동된 후 자동으로 회전됩니다. 요소는 현재 행의 왼쪽이나 오른쪽으로 이동할 수 있습니다. 속성은 다음과 같습니다: float: left, float: right 또는 float: none”

“정의된 모든 요소에 대해 이것을 설정해야 합니다. 속성(암시적 너비가 있는 요소가 아닌 경우) 너비가 설정되지 않으면 결과를 예측할 수 없습니다. "

" 예를 들어 부동 요소에는 정의된 너비가 있어야 합니다. 또한 명시적으로 지정되었거나 암시적이든 컨테이너 요소를 마치 플로팅되지 않은 콘텐츠인 것처럼 가로로 채워서 다른 콘텐츠가 이를 둘러쌀 공간이 없으며 일반적인 문서 흐름에서는 다른 요소가 세로 여백입니다. 마지막으로, 플로팅 요소는 일반적인 문서 흐름에서 인접한 블록 수준 요소와 겹칠 수 있습니다(주석: 플로팅 요소는 일반적인 문서 흐름 공간을 차지하지 않으므로 그렇게 이해하지 않는 것이 좋습니다. , 하지만 플로팅의 개념입니다.) "

"가장 먼저 염두에 두어야 할 점은 플로팅 요소는 왼쪽이나 오른쪽으로만 플로팅할 수 있으며 가운데로 플로팅하는 것은 없습니다. 초보자는 실수를 합니다. 가장 기본적인 규칙은 부동 요소가 양쪽으로만 부동할 수 있다는 것입니다. "

" 요소를 부동하게 두면 해당 요소를 만날 때까지 오른쪽이나 왼쪽으로 부동됩니다. 다른 요소를 같은 방향으로 띄우면 이전에 띄운 요소의 가장자리에 닿을 때까지 떠 있게 됩니다. 더 많은 요소를 띄우면 요소가 차례로 배열되지만 곧 공간이 없게 됩니다. 행은 더 이상 부동 요소를 수용할 수 없으며 다음 부동 요소는 다른 행으로 줄바꿈되어 계속 정렬됩니다. "

포함 블록 또는 포함 상자: "컨테이너 요소는 다른 하위 요소를 포함하는 행 수준 또는 블록 수준 요소를 참조합니다. . . . ” 　　

　　　“명시적으로 지정하면 플로팅된 요소의 세로 위치는 문서 흐름의 원래 위치에 따라 결정되며 상단은 현재 줄의 상단과 정렬됩니다. 그러나 수평으로는 컨테이너 요소의 가장자리를 향해 최대한 멀리 이동하지만 여전히 컨테이너 요소의 패딩을 따릅니다. 같은 행의 인라인 요소는 부동 요소 주위에 배열됩니다. "

"플로팅 요소는 일반적인 문서 흐름 공간을 차지하지 않기 때문에 플로팅 요소 전후에 위치가 명시적으로 지정되지 않은 블록 수준 요소는 플로팅 요소가 있어야 할 위치를 차지합니다. 존재한 적이 없습니다. 플로팅된 요소 뒤의 줄은 플로팅된 요소에 따라 너비가 줄어듭니다. 부동 요소 앞의 요소는 재배열되어 별도의 행을 차지합니다. (주석: ie와 ff는 이 경우 다르게 동작합니다.)"

"현재 행의 수평 방향에 플로팅 요소를 수용할 공간이 충분하지 않으면 해당 공간이 생길 때까지 다음 행으로 이동합니다. 부동 요소를 수용할 수 있습니다. "

"플로팅 요소는 원본 문서 위치의 상한을 초과할 수 없습니다. 부동 요소의 상단은 현재 행의 상단(또는 현재 행 요소가 없는 경우 이전 블록 수준 요소의 하단 가장자리)과 정렬되어야 합니다. ”

　“플로트 이론을 제대로 이해하려면 CSS에서 라인 박스가 무엇인지 이해해야 합니다. 안타깝게도 행이 무엇인지 설명하려면 먼저 행 수준 요소가 무엇인지 이해해야 합니다.행 수준 요소는 과 같은 비블록 수준 요소를 참조합니다. 행은 행을 구성하는 모든 행 수준 요소를 포함하는 가상 직사각형입니다. 가장 높은 행 수준 요소입니다. ”

　“Div의 모든 열에 float: left를 추가하면 페이지 하단에 바닥글을 두고 싶다면 그렇게 하지 마세요. 그냥 추가하는 한 가장 긴 열은 필요하지 않습니다: 둘 다"

"플로팅 요소를 포함하기 위해 플로팅 요소를 사용하는 것은 잠재적인 단점이 있습니다. 즉, 페이지가 항상 일관된 표시를 유지할 수 있는지 여부는 다음에 따라 달라집니다. 브라우저 구현이 일관성을 유지하는지 여부입니다. 특히 플로트 요소가 더 복잡한 레이아웃의 일부인 경우 더욱 취약해집니다. ”

수레 청소
------------------------- --- ---------------------------------- --- ---------------------

　"플로팅된 요소 뒤의 요소는 자동으로 플로팅된 요소를 둘러쌉니다. 이를 원하지 않으면 이러한 요소에 'clear' 속성을 적용할 수 있습니다. 이 속성에는 4가지 설정이 있습니다: 클리어: 왼쪽, 클리어: 오른쪽, 클리어: 둘 다 또는 클리어: 없음”

의미 없는 추가 태그를 도입하지 않고 플로팅 요소를 정리하는 많은 기술이 있습니다. 아래 3가지가 더 일반적인 방법입니다. ) 플로트 컨테이너 요소 함께 b) 오버플로 사용: 컨테이너 요소에 숨겨진 c) 다음과 같은 CSS 의사 클래스 사용:

이후 "정리 요소를 삽입하는 것은 컨테이너를 만드는 것입니다. 플로팅된 모든 요소를 ​​올바르게 래핑하기 위한 표준 관행은, 그렇게 하면 컨테이너의 아래쪽 가장자리를 '끌어서' 포함된 요소를 감싸는 효과가 있습니다. ”

　“플로트 디자인 기반 레이아웃의 경우 일반적인 문제는 플로트 요소의 컨테이너가 플로트 요소를 포함하도록 자동으로 확장되지 않는다는 것입니다. 모든 부동 요소 주위에 테두리(예: 컨테이너 요소 주위의 테두리)를 추가하려면 브라우저에 컨테이너를 늘리도록 명시적으로 명령해야 합니다. 오버플로 방법을 사용할 수 있습니다. ”

사용:after 우리가 마침표를 삽입하고 속성 {clear:both;}를 설정하기 위해 :after를 사용한다고 상상해 보십시오. 이것이 여러분이 해야 할 전부이지만 아무도 컨테이너의 바닥을 받아들이지 않을 것입니다. 약간의 간격이 있으므로 완벽하게 맞도록 {height: 0;} 및 {visibility: hide;}도 설정해야 합니다.