CSS 플로팅으로 인해 어떤 문제가 발생합니까?

CSS 플로팅의 영향: 1. 플로팅 요소가 문서 흐름을 벗어나므로 상위 요소의 높이를 확장할 수 없습니다. 이는 상위 요소의 높이가 상위 요소와 동일한 수준에 있는 요소에 영향을 미칩니다. 설정되지 않으면 상위 요소가 디스플레이에 표시되지 않습니다. 2. 플로팅 요소는 더 이상 원본 문서 흐름의 위치를 ​​차지하지 않으며 후속 요소의 레이아웃에 영향을 미칩니다.

이 기사의 운영 환경: Windows 7 시스템, CSS3 버전, Dell G3 컴퓨터.

권장: css 비디오 튜토리얼

우리는 알아야 합니다: 플로팅 상자는 다른 플로팅 상자나 외부 가장자리에 있는 포함 상자를 만날 때까지 왼쪽과 오른쪽으로 이동할 수 있습니다. 플로팅 상자는 문서 흐름의 일반적인 흐름에 속하지 않습니다. 요소가 플로팅되면 블록 수준 요소의 레이아웃에 영향을 주지 않고 인라인 요소의 레이아웃에만 영향을 미칩니다.

이때 문서 흐름의 일반적인 흐름에서는 플로팅 상자에 동일한 레이아웃 모드가 없는 것으로 표시됩니다. 담는 상자의 높이가 떠 있는 상자보다 작을 경우 "높이 붕괴"가 나타납니다.

상위 요소가 높이를 설정하지 않은 경우, 상위 요소의 하위 요소가 부동으로 설정된 경우 상위 요소의 높이는 자동으로 확장되지 않으며 높이 값도 없습니다.

이러한 방식으로 float를 설정한 후에는 다음과 같은 몇 가지 문제가 있습니다.

• 상위 요소의 여백이 영향을 받고 위쪽, 아래쪽, 왼쪽 및 오른쪽 가운데 맞춤을 달성할 수 없습니다.

• 부모 요소의 높이가 설정되지 않으면 플로팅 후 부모 요소의 높이가 늘어나지 않고 부모 요소가 디스플레이에 표시되지 않습니다.

요약: 부동의 결과

(1) 부동 요소가 문서 흐름에서 벗어났기 때문에 상위 요소의 높이를 확장할 수 없으며 다음과 같은 경우 상위 요소와 동일한 수준의 요소에 영향을 미칩니다. 상위 요소가 지정되지 않았습니다. 상위 요소가 디스플레이에 표시되지 않도록 높이를 설정합니다.

(2) 플로팅 요소와 동일한 수준에 있는 플로팅되지 않는 요소는 플로팅 요소가 문서 흐름을 떠나 원래 위치를 차지하지 않기 때문에 이를 따릅니다.

(3) 플로팅 요소가 첫 번째 플로팅 요소가 아닌 경우 요소, 그 이전 요소 요소도 부동되어야 합니다. 그렇지 않으면 페이지의 구조적 표시에 쉽게 영향을 미칠 것입니다

플로팅 요소는 더 이상 원본 문서 흐름의 위치를 ​​차지하지 않으므로 레이아웃에 영향을 미칩니다. 이러한 문제를 해결하려면 에서 float를 Clear해야 합니다.

플로팅 클리어 방법은? 클리어 플로팅 프로세스

1. 먼저 부모의 CSS 높이를 설정하여 클리어합니다. 일반적으로 높이에 대한 높이를 설정하고, 콘텐츠 높이를 100px로 설정하고, 위쪽 및 아래쪽 상자를 2px로 설정합니다. 부모의 전체 높이 높이는 102px입니다. 높이 스타일을 사용하지만 먼저 콘텐츠의 높이를 계산해야 합니다.

2. float를 지우려면 clean:both 속성을 사용하세요. div에 class="clear 스타일을 넣어 float를 지울 수 있습니다.

3. 상위 div의 속성을 정의합니다. 상위 CSS 정의를 사용합니다. 오버플로:선택기의 숨겨진 스타일로 부모가 생성한 플로트를 지웁니다.

더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 소개를 방문하세요.

위 내용은 CSS 플로팅으로 인해 어떤 문제가 발생합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!