CSS-float에 대한 명확한 소개:모두

우선 p가 블록 수준 요소라는 점을 알아야 합니다. 페이지에서 독점적인 줄을 차지하고 위에서 아래로 배열되어 있는데, 이는 전설적인 흐름입니다.

p1의 너비가 매우 작더라도 페이지의 한 줄에 p1과 p2를 수용할 수 있으며, p 요소가 블록 수준이고 자체 공간을 차지하므로 p2가 p1 뒤에 순위가 지정되지 않음을 알 수 있습니다. 선. 위의 이론은 표준 흐름에서 p를 참조합니다.
아무리 복잡한 레이아웃이라도 기본 출발점은 "여러 p 요소를 한 행에 표시하는 방법"입니다. 플로팅은 특정 p 요소가 표준 스트림에서 벗어나 표준 스트림에 떠 있게 하는 것으로 이해될 수 있습니다. 이는 표준 스트림과 동일한 수준이 아니므로 이를 플로트라고 합니다.
예를 들어 위 그림의 p2가 float라고 가정하면 표준 흐름에서 벗어나지만 p1, p3, p4는 여전히 표준 흐름에 있으므로 p3가 자동으로 위쪽으로 이동하여 p2의 위치를 ​​차지하게 되며, 흐름을 재구성합니다. 그림과 같이:

그림에서 볼 수 있듯이 p2는 부동으로 설정되어 있으므로 더 이상 표준 흐름에 속하지 않습니다. p3은 자동으로 위로 이동하여 p2의 위치를 ​​대체하며 p1, p3 및 p4는 순서대로 배열되어 새로운 흐름이 됩니다. 그리고 float는 표준 흐름 위에 떠 있기 때문에 p2는 p3의 일부를 차단하고 p3는 "짧게" 보입니다. 여기서 p2는 왼쪽 부동(float:left;)을 사용합니다. 이는 왼쪽 부동으로 이해될 수 있습니다. :right;)는 물론 오른쪽에 배치됩니다. 여기서 왼쪽과 오른쪽은 페이지의 왼쪽과 오른쪽 가장자리를 나타냅니다.
p2를 오른쪽으로 띄우면 효과는 다음과 같습니다.

이때 p2는 페이지 오른쪽 가장자리 근처에 배치되어 더 이상 p3를 차단하지 않습니다. 독자는 p1, p3으로 구성된 흐름을 명확하게 볼 수 있습니다. , 그리고 위에서 언급한 p4.
지금까지 우리는 하나의 p 요소만 플로팅했습니다. 더 많은 것은 어떻습니까?
다음으로 p2와 p3 모두에 왼쪽 부동을 추가합니다. 효과는 다음과 같습니다.

마찬가지로 p2와 p3은 부동이므로 더 이상 표준 흐름에 속하지 않으므로 p4는 자동으로 위로 이동하여 " new" with p1 표준 흐름이고 float는 표준 흐름에 떠 있으므로 p2는 p4를 다시 차단합니다.
흠, 여기서 요점이 나옵니다. p2와 p3가 동시에 부동으로 설정되면 p3가 p2를 따릅니다. 독자들이 지금까지 모든 예에서 p2가 부동이라는 것을 눈치채셨는지 모르겠지만, 그렇지 않습니다. t.p1 이후에 따르세요. 따라서 중요한 결론을 내릴 수 있습니다.
특정 p 요소 A가 플로팅이고 A 요소의 이전 요소도 플로팅인 경우 A 요소는 이전 요소의 오른쪽을 따릅니다(이 두 요소가 한 줄 요소에 배치할 수 없으면 A 요소가 다음 줄로 압착됩니다. A 요소의 이전 요소가 표준 스트림의 요소인 경우 A의 상대적 수직 위치는 변경되지 않습니다. 즉, A의 상단은 항상 이전 요소와 동일하게 정렬됩니다. 간단히 말하면, 두 개의 float:left가 수평으로 배열됩니다. 첫 번째 스트림이 표준 스트림이고 두 번째 스트림이 float:left인 경우 두 번째 스트림은 여전히 ​​첫 번째 스트림 아래에 배열됩니다. HTML 코드는 p의 순서에 따라 결정됩니다.
페이지의 가장자리에 가까운 끝이 앞면이고, 페이지의 가장자리에서 먼 끝이 뒷면입니다.
독자의 이해를 돕기 위해 몇 가지 예를 더 들어보겠습니다.
p2, p3, p4를 왼쪽 부동으로 설정하면 효과는 다음과 같습니다.


위 결론에 따르면 p4 분석부터 시작하면 상위 요소 p3이 부동인 것으로 확인되므로 p4도 따라오게 됩니다. p3은 상위 요소 p2도 부동 상태임을 확인하므로 p3은 p2를 따르고 p2는 상위 요소 p1이 표준 스트림의 요소이므로 p2의 상대적인 수직 위치는 변경되지 않고 그대로 유지됩니다. p1 요소의 아래쪽에 맞춰 정렬됩니다. 부동 상태로 남아 있기 때문에 왼쪽이 페이지 가장자리에 가깝기 때문에 왼쪽이 앞면이므로 p2는 가장 왼쪽에 있습니다. p2, p3, p4가 모두 오른쪽으로 부동하도록 설정된 경우 효과는 다음과 같습니다.


원리는 기본적으로 왼쪽으로 부동하는 것과 동일하지만 해당 관계에 주의해야 합니다. 오른쪽으로 떠 있기 때문에 오른쪽이 페이지 가장자리에 가깝기 때문에 오른쪽이 앞쪽이므로 p2는 맨 오른쪽에 있습니다.

p2와 p4를 왼쪽으로 플로팅하면 효과 다이어그램은 다음과 같습니다.

여전히 결론에 따르면 p2와 p4는 플로팅되어 표준 흐름을 벗어납니다. 따라서 p3는 자동으로 위로 이동하여 p1의 표준 흐름. p2는 이전 요소 p1이 표준 스트림의 요소임을 확인하므로 p2의 상대적 수직 위치는 변경되지 않고 p1의 아래쪽에 정렬됩니다. p4는 이전 요소 p3이 표준 스트림의 요소임을 확인하므로 p4의 상단과 p3의 하단이 정렬됩니다. 이는 항상 사실입니다. 그림에서 p3이 위로 이동한 후 p4도 마찬가지이기 때문입니다. 위로 이동하고 p4는 항상 위로 이동합니다. 이는 자체 상단이 이전 요소 p3(표준 흐름의 요소)의 하단과 정렬되도록 하기 위한 것입니다.

이 시점에서 플로트 추가를 마스터한 독자에게 축하를 전합니다. 하지만 플로트 클리어는 위의 기초를 바탕으로 매우 이해하기 쉽습니다.

위를 살펴보면 요소가 플로팅되기 전, 즉 표준 흐름에서는 수직으로 배열되어 있음을 알 수 있지만, 플로팅 후에는 수평으로 배열된 것으로 이해할 수 있습니다.
수레를 청소하는 것은 수평 배열을 깨는 것으로 이해될 수 있습니다.
수레를 지우는 키워드는 명확하며 공식 정의는 다음과 같습니다.
구문:

clear : none | right | two

값:

none : 기본값. 플로팅 개체는 양쪽에 허용되지 않습니다

left: 왼쪽에는 플로팅 개체가 허용되지 않습니다

right: 오른쪽에는 플로팅 개체가 허용되지 않습니다

both: 플로팅 개체는 허용되지 않습니다

정의는 매우 쉽습니다. 이해는 되지만, 실제로 사용하면 독자들이 혼란스러울 수도 있습니다.
정의에는 문제가 없지만, 너무 모호해서 당황스럽습니다.
위 기준에 따르면 페이지에 p1과 p2 요소가 두 개만 있으면 둘 다 왼쪽으로 부동 상태가 됩니다.

이때 p1과 p2가 모두 부동 상태입니다. 규칙에 따르면 p2는 p1을 따르지만 p1이 부동 상태가 아니고 p2가 왼쪽으로 부동하는 것처럼 p2가 p1 아래에 배열될 수 있기를 바랍니다.

이때, 공식적인 정의에만 근거한다면 독자들은 다음과 같이 작성해 볼 수도 있습니다: p1의 CSS 스타일에 clean:right;를 추가하면 플로팅 요소가 허용되지 않습니다. p1의 오른쪽에 p2가 부동 요소이므로 규칙을 충족하기 위해 자동으로 한 줄 아래로 이동됩니다.

사실 이러한 이해는 잘못된 것이며 아무런 효과가 없습니다.

CSS 클리어 플로트(clear)의 경우, 이 규칙은 클리어를 사용하는 요소 자체에만 영향을 미칠 수 있으며 다른 요소에는 영향을 미칠 수 없다는 점을 기억해야 합니다.

이해하는 방법은 무엇입니까? 위의 예를 들어보면 p2가 이동하기를 원하지만 p1 요소의 CSS 스타일에서 명확한 부동 소수점을 사용하여 p1 오른쪽에 있는 부동 요소를 지워(clear:right;) p2를 강제로 아래로 이동시키려고 합니다. 이 클리어 플로트는 p1에서 호출되기 때문에 p2가 아닌 p1에만 영향을 미칠 수 있으므로 실현 가능하지 않습니다.

p2를 아래로 이동하려면 p2의 CSS 스타일에서 float를 사용해야 합니다. 이 예에서는 p2의 왼쪽에 플로팅 요소 p1이 있으므로 p2의 CSS 스타일에서 clear:left를 사용하여 플로팅 요소가 p2의 왼쪽에 표시되지 않도록 지정하면 됩니다. 요소, p2는 한 줄 아래로 이동해야 합니다.

페이지에 두 개의 요소 p1과 p2만 있고 둘 다 부동 상태라면 어떻게 될까요? 이때 독자들은 다음과 같은 장면을 스스로 추측할 수 있어야 합니다.

이 때 p2를 p1로 낮추고 싶다면 어떻게 해야 할까요?

p2를 이동하려면 p2의 CSS 스타일로 float를 호출해야 합니다. float는 이를 호출하는 요소에만 영향을 미치기 때문입니다.

p2의 오른쪽에 플로팅 요소 p1이 있는 것을 볼 수 있습니다. 그런 다음 p2의 CSS 스타일에서 clear:right를 사용하여 플로팅 요소가 p2의 오른쪽에 나타날 수 없도록 지정할 수 있습니다. , 따라서 p2는 한 줄 아래로 이동하여 p1 아래로 순위가 지정됩니다.

나중에 확장해 보겠습니다.
clear:both가 추가되지 않은 경우 효과는 다음과 같습니다.

두 번째 줄은 float이므로 회색 배경색은 두 번째 줄에 추가되지 않으며 .ob- body 두 번째 줄은 .ob-body 위에 떠 있습니다. 의사 클래스: after는 두 번째 줄을 땅으로 되돌리는 데 사용됩니다. 둘 다:

마지막으로 분석해 보겠습니다. Clearfix를 추가한 후 괜찮은 이유는 무엇입니까? 두 가지 작성 방법은 실제로 동일한 것을 의미합니다. 즉, .ob-body 끝에 빈

을 추가하면 명확해야 합니다. 둘 다 그렇지 않으면 표준 스트림인 경우 첫 번째 스트림의 맨 아래에 가까워집니다. 물론 두 번째 줄을 덮을 수는 없습니다. 실제로 이 예에서는clear:left를 사용하는 것도 유효하지만(두 번째 줄은 float:left이므로) 다용도성을 위해 둘 다 사용합니다. 또한 확인됨: 이 규칙은 삭제된 요소 자체에만 영향을 미칠 수 있으며 요소 자체에는 영향을 미치지 않으며 숨겨진 p 요소를 모두 지웁니다.

위 내용은 CSS-float에 대한 명확한 소개:모두의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!