html5에서 float를 지우는 속성은 무엇입니까?-프런트엔드 Q&A-php.cn

html5에서 float를 지우는 속성은 "clear"입니다. Clear 속성은 요소의 어느 쪽이 다른 부동 요소를 허용하지 않는지 지정합니다. "clear:both;" 스타일이 부동 요소로 설정된 경우 요소의 왼쪽이나 오른쪽이 모두 허용되지 않도록 부동 요소를 지울 수 있습니다. 떠있는 것을 허용합니다.

html5에서 float를 지우는 속성은 무엇입니까?

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

html5에서 float를 지우는 속성은 "clear"입니다.

clear 속성은 요소의 어느 쪽이 다른 플로팅 요소를 허용하지 않는지 지정합니다.

clear 속성에 대해 자세히 살펴보겠습니다.

먼저 div는 블록 수준 요소라는 점을 알아야 합니다. 페이지에서 독점적인 줄을 차지하고 위에서 아래로 배열되는 전설적인 흐름입니다. 아래 그림과 같이:

div1의 너비가 매우 작더라도 페이지의 한 줄에는 div1과 div2를 수용할 수 있으며, div2는 div 요소가 포함되어 있기 때문에 div1 뒤에 순위가 지정되지 않음을 알 수 있습니다. 자체 라인을 차지합니다. ㅋㅋㅋ out , , IN IN, ON IN, TO IN, 환경별, IN, TO, 배치 표준 흐름으로.

Xiaocai는 레이아웃이 아무리 복잡하더라도 기본 출발점은 "여러 div 요소를 한 줄에 표시하는 방법"이라고 믿습니다. ???? 표준 스트림으로 이동하려면 현재 제공되어야 합니다.

플로팅은 특정 div 요소가 표준 흐름에서 벗어나 표준 흐름과 동일한 수준이 아닌 표준 흐름에 떠 있게 만드는 것으로 이해될 수 있습니다.

예를 들어 위 그림의 div2가 float라고 가정하면 표준 흐름에서 벗어나지만 div1, div3, div4는 여전히 표준 흐름에 있으므로 div3이 자동으로 위쪽으로 이동하여 div2의 위치를 차지하게 되며, 흐름을 재구성합니다. 그림과 같이:

그림에서 볼 수 있듯이 div2는 부동으로 설정되어 있으므로 더 이상 표준 흐름에 속하지 않습니다. div3은 div1, div3의 위치를 대체하기 위해 자동으로 위로 이동합니다. 그리고 div4가 순서대로 배열되어 새로운 흐름이 됩니다. 그리고 부동 소수점은 표준 흐름 위에 떠 있기 때문에 div2는 div3의 일부를 차단하고 div3은 "짧게" 보입니다.

여기서 div2는 왼쪽 플로팅(float:left;)을 사용합니다. 이는 플로팅으로 이해되어 왼쪽으로 정렬되고, 오른쪽 플로팅(float:right;)은 물론 오른쪽으로 정렬된다는 의미입니다. 여기서 왼쪽과 오른쪽은 페이지의 왼쪽과 오른쪽 가장자리를 나타냅니다.

div2를 오른쪽으로 띄우면 효과는 다음과 같습니다.

이때 div2는 페이지 오른쪽 가장자리에 정렬되어 더 이상 div3를 차단하지 않습니다. 독자는 div1의 구성을 명확하게 볼 수 있습니다. , div3 및 div4가 위에서 언급되었습니다.

지금까지 하나의 div 요소만 플로팅했습니다. 더 많은 것은 어떻습니까?

다음으로 div2와 div3 모두에 왼쪽 부동을 추가합니다. 효과는 아래와 같습니다.

마찬가지로 div2와 div3은 부동이므로 더 이상 표준 흐름에 속하지 않으므로 div4는 자동으로 위로 이동합니다. 그리고 div1과 하나를 형성합니다. "새로운" 표준 흐름과 부동 소수점은 표준 흐름 위에 떠 있으므로 div2는 div4를 다시 차단합니다.

흠, 본론으로 들어가겠습니다. div2와 div3이 동시에 부동으로 설정되면 div3는 div2를 따릅니다. 독자들이 지금까지 모든 예에서 div2가 부동이라는 사실을 눈치채셨는지 모르겠습니다. does div1 이후에는 따르지 않습니다. 따라서 중요한 결론을 내릴 수 있습니다.

특정 div 요소 A가 플로팅이고 A 요소의 이전 요소도 플로팅인 경우 A 요소는 이전 요소를 따릅니다(한 요소에 맞지 않는 경우). line) 두 개의 요소가 있는 경우 A 요소는 다음 줄로 압착됩니다. A 요소의 이전 요소가 표준 흐름의 요소인 경우 A의 상대적 수직 위치는 변경되지 않습니다. A의 상단은 항상 하단에 정렬된 이전 요소와 동일합니다.

div의 순서는 HTML 코드의 div 순서에 따라 결정됩니다.

페이지의 가장자리에 가까운 끝이 앞면이고, 페이지의 가장자리에서 먼 끝이 뒷면입니다.

독자의 이해를 돕기 위해 몇 가지 예를 더 들어보겠습니다.

div2, div3, div4를 왼쪽 부동으로 설정하면 효과는 다음과 같습니다.

위의 결론을 바탕으로 Xiao Cai를 따라 이해하세요. div4 분석부터 시작하면 상위 요소 div3이 부동 상태임을 발견하므로 div4는 div3을 따라 상위 요소 div2도 부동 상태임을 발견합니다. div2; 및 div2가 상위 요소 div1이 표준 흐름의 요소임을 확인한 후 div2의 상대적 수직 위치는 변경되지 않고 상단은 여전히 div1 요소의 하단과 정렬됩니다. 부동 상태로 남아 있기 때문에 왼쪽이 페이지 가장자리에 가깝기 때문에 왼쪽이 전면이므로 div2가 가장 왼쪽에 있습니다.

div2, div3, div4를 오른쪽으로 플로팅하도록 설정하면 효과는 다음과 같습니다.

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

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

여전히 결론에 따르면 div2와 div4는 플로팅되어 표준 흐름을 벗어나므로 div3는 자동으로 위로 이동하여 형성됩니다. div1을 사용한 표준 흐름. div2는 이전 요소 div1이 표준 흐름의 요소임을 확인하므로 div2의 상대적 수직 위치는 변경되지 않고 그대로 유지되며 div1의 아래쪽에 정렬됩니다. div4는 이전 요소 div3이 표준 흐름의 요소임을 확인하므로 div4의 상단은 div3의 하단과 정렬되며 이는 항상 사실입니다. 그림에서 볼 수 있듯이 div3이 위로 이동한 후 div4도 마찬가지이기 때문입니다. 위로 이동하고 div4는 항상 위로 이동합니다. 이는 자체 상단이 이전 요소 div3(표준 흐름의 요소)의 하단과 정렬되도록 하기 위한 것입니다.

이 시점에서 플로트 추가를 마스터한 독자 여러분께 축하를 전합니다. 하지만 플로트 클리어는 위의 기초를 바탕으로 매우 이해하기 쉽습니다. ， 위에서 학습한 후, 요소가 플로팅되기 전에는 수직으로 배열된 표준 흐름에 있음을 알 수 있으며, 플로팅 후에는 수평 배열로 이해할 수 있습니다.

수레를 치우는 것은 수평 배열을 깨는 것으로 이해될 수 있습니다. ㅋㅋㅋ . 양쪽에 플로팅 개체 허용

왼쪽 : 왼쪽에 플로팅 개체 허용 안 됨

오른쪽 : 오른쪽에 플로팅 개체 허용 안 됨

양쪽 : 플로팅 개체 허용 안 됨

정의는 매우 쉽습니다. 이해하기는 쉽지만 실제로 사용해보면 그렇지 않다는 것을 알게 될 것입니다.

정의에는 아무런 문제가 없지만, 너무 모호해서 당황스럽습니다.

위 기준에 따르면 페이지에 div1과 div2 요소가 두 개만 있으면 둘 다 왼쪽에 떠 있습니다.

이때 div1과 div2가 모두 떠 있습니다. 규칙에 따라 div2는 div1을 따릅니다. 하지만 div1이 부동 상태가 아니고 div2가 부동 상태로 남아 있는 것처럼 div2가 div1 아래에 정렬되기를 원합니다.

이때, 클리어 플로트(clear)가 사용됩니다. 공식 정의에만 의존한다면 독자들은 다음과 같이 작성해 볼 수 있습니다: div1의 CSS 스타일에 클리어:오른쪽을 추가하면 플로팅 요소가 허용되지 않습니다. div1의 오른쪽에 있습니다. div2는 부동 요소이므로 규칙을 충족하기 위해 자동으로 한 줄 아래로 이동합니다.

사실 이러한 이해는 잘못된 것이며 아무런 효과가 없습니다. 결론을 살펴보겠습니다.

> 명확하게 해야 합니다.

어떻게 이해하시나요? 위의 예를 보면 div2가 이동하기를 원하지만 div1 요소의 CSS 스타일에 클리어 플로트를 사용하여 div1 오른쪽에 있는 플로팅 요소(clear:right;)를 지워서 div2가 아래로 이동하도록 합니다. 이 명확한 부동 소수점은 div1에서 호출되기 때문에 가능하지 않으며 div2가 아닌 div1에만 영향을 미칠 수 있습니다.

Xiaocai의 결론에 따르면 div2를 아래로 이동하려면 div2의 CSS 스타일에서 float를 사용해야 합니다. 이 예에서는 div2의 왼쪽에 부동 요소 div1이 있으므로 div2의 CSS 스타일에서 clear:left를 사용하여 부동 요소가 div2의 왼쪽에 표시되지 않도록 지정하면 됩니다. 요소인 div2는 한 줄 아래로 이동해야 합니다.

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

이 때 div2를 div1 아래로 이동하려면 어떻게 해야 할까요?

마찬가지로 Xiaocai의 결론에 따르면 div2를 이동하려면 div2의 CSS 스타일로 float를 호출해야 합니다. float는 이를 호출하는 요소에만 영향을 미치기 때문입니다.

div2의 오른쪽에 부동 요소 div1이 있는 것을 볼 수 있습니다. 그런 다음 div2의 CSS 스타일에서 clear:right를 사용하여 부동 요소가 div2의 오른쪽에 나타날 수 없도록 지정할 수 있습니다. , 그러면 div2는 강제로 한 줄 아래로 이동하고 순위는 div1 아래로 지정됩니다.