CSS float에 대해 당신이 모르는 작은 것들

이전 단어

Float가장 먼저 사용된 단어는 입니다. 오른쪽 ">, 이미지 주변의 텍스트 조판에 사용됩니다. 요즘 CSS에서 흔히 사용되는 레이아웃 방식은 플로팅(floating) 콘텐츠를 자세히 소개하고 정리하는 글입니다.

정의

float Floating

플로팅 요소를 구분합니다. 일반 흐름에서 지정한 방향으로 왼쪽 또는 오른쪽으로 이동하고 상위 경계 또는 다른 부동 요소에 닿으면 중지합니다.

값: 왼쪽 | 오른쪽 상속

초기 값: 없음

적용 대상: 모든 요소

상속: 없음

[참고] 대체가 아닌 요소를 부동 소수점으로 표시하는 경우 너비를 선언해야 합니다. 요소의 경우 그렇지 않으면 CSS 사양에 따라 요소의 너비가 0이 되는 경향이 있습니다

특징

[1] 부동 흐름

일반적인 흐름에서는 요소가 하나로 배열됩니다. 플로팅 요소도 플로팅 흐름을 구성합니다

【2】블록 수준 상자

플로팅 요소 자체는 요소 자체에 관계없이 블록 수준 상자를 생성하므로 플로팅 요소 주변의 여백은 병합되지 않습니다.

【3】Wrapping

플로팅 요소의 포함 블록은 가장 가까운 블록 수준 상위 요소를 참조합니다. 하위 부동 요소는 포함 블록의 위쪽, 왼쪽 및 오른쪽 경계를 초과해서는 안 됩니다. 포함 블록의 높이가 설정되지 않고 포함 블록이 부동하는 경우 포함 블록은 모든 하위 부동 요소를 포함하도록 확장됩니다. 포함 블록의 너비가 설정되지 않고 포함 블록이 부동하는 경우 너비는

【4】파괴적

플로팅 요소는 일반 흐름에서 벗어나 자체 라인 상자속성을 파괴합니다. , 포함된 블록 요소의 높이가 붕괴되어 플로팅 상자가 붕괴됩니다. 옆에 있는 라인 상자는 플로트 상자를 위한 공간을 만들기 위해 짧아지고 라인 상자는 플로트 상자 주위로 재배치됩니다.

성능

[1] 플로팅 요소의 왼쪽(또는 오른쪽) 외부 경계는 소스 문서에서 이전 왼쪽 플로트(또는 오른쪽 플로트) 요소의 오른쪽(왼쪽) 외부 경계여야 합니다. 나중에 나타나는 플로트 요소의 상단이 먼저 나타나는 플로트 요소의 하단 아래에 있지 않는 한

[2] 왼쪽 플로팅 요소의 오른쪽 외부 테두리는 왼쪽 외부 테두리의 오른쪽에 있지 않습니다. 오른쪽 부동 요소의 오른쪽에 있습니다. 오른쪽 플로팅 요소의 왼쪽 외부 테두리는 왼쪽에 있는 왼쪽 플로팅 요소의 오른쪽 외부 테두리 왼쪽에 있지 않습니다.

[3] 왼쪽(오른쪽)에 또 다른 플로팅 요소가 있습니다. 왼쪽(또는 오른쪽) 부동 요소 중 전자 오른쪽 외부 경계는 포함 블록의 오른쪽(왼쪽) 경계의 오른쪽(왼쪽)에 있을 수 없습니다.

[4] 왼쪽(또는 오른쪽) 부동 요소의 외부 경계는 포함 블록의 왼쪽(또는 오른쪽) 내부 경계를 초과할 수 없습니다.

[5] 부동 요소의 상단은 상위 요소의 내부 상단보다 높을 수 없습니다. 부동 요소가 병합된 두 여백 사이에 있는 경우 두 요소 사이에 블록 수준 상위 요소가 있는 것처럼 부동 요소를 배치합니다.

[6] 부동 요소의 상단은 이전의 모든 부동 요소보다 높을 수 없습니다. 요소 또는 블록 수준 요소의 상단이 더 높습니다.

[7] 플로트 요소가 소스 문서의 다른 요소 앞에 있는 경우 플로트 요소의 상단은 다음을 포함하는 줄 상자의 상단보다 높을 수 없습니다. 높음

[8] 플로팅된 요소는 가능한 한 높게 배치되어야 합니다.

[9] 왼쪽에 플로팅된 요소는 가능한 한 왼쪽에 배치되어야 합니다. 오른쪽 부동 요소는 오른쪽 끝까지 배치되어야 합니다. 위치가 높을수록 오른쪽이나 왼쪽으로 더 멀리 떠 있게 됩니다.

겹침

플로팅 요소가 상위 요소의 경계를 초과하는 방법에는 두 가지가 있습니다. 하나는 너비가 부동 요소의 크기가 상위 요소보다 큽니다. 다른 방법은 음수 여백을 설정하는 것입니다. 플로팅 요소의 여백이 음수이고 플로팅 요소가 일반 흐름 요소와 겹치는 경우

【1】인라인 상자가 플로팅 요소와 겹치면 해당 테두리, 배경 및 내용이 모두 플로팅 요소 위에 표시됩니다

【2】블록박스가 플로팅 요소와 겹칠 경우 테두리와 배경은 플로팅 요소 아래에 표시되고 내용은 플로팅 요소 위에 표시됩니다

[관련 추천]

1.

무료 CSS 온라인 동영상 튜토리얼

2.

css 온라인 매뉴얼

php.cn Dugu Jiujian ( 2)-css 동영상 튜토리얼

위 내용은 CSS float에 대해 당신이 모르는 작은 것들의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!