> 웹 프론트엔드 > CSS 튜토리얼 > 플로팅 요소는 페이지의 일반적인 흐름과 어떻게 상호 작용합니까?

플로팅 요소는 페이지의 일반적인 흐름과 어떻게 상호 작용합니까?

DDD
풀어 주다: 2024-10-31 08:47:01
원래의
763명이 탐색했습니다.

How do Floating Elements Interact with the Normal Flow of a Page?

플로팅 요소와 흐름과의 관계

귀하의 질문은 HTML/CSS의 플로팅 요소 개념에 관한 것입니다. 답변을 살펴보겠습니다.

1. "여전히 흐름의 일부로 남아 있음"의 의미

플로팅 요소는 페이지의 일반적인 흐름에서 제거되지만 여전히 흐름의 일부로 남아 있습니다. 이는 더 이상 흐름에 영향을 주지 않는 절대 위치의 요소와 달리 텍스트와 인라인 요소가 요소를 둘러쌀 수 있음을 의미합니다.

귀하의 예에서 "여전히 흐름의 일부로 남아있다"는 것은 첫 번째 DIV(". left")는 왼쪽으로 떠 있음에도 불구하고 흐름에 남아 있습니다. 이는 텍스트가 계속해서 둘러싸일 수 있다는 사실을 통해 알 수 있습니다. 따라서 첫 번째 DIV는 흐름의 "외부"에 있는 것이 아니라 콘텐츠가 흐름을 따라 흐르도록 하는 방식으로 배치됩니다.

2. 포함 블록 외부에 세 번째 DIV 배치

세 번째 DIV(".right")는 오른쪽으로 부동되어 포함 블록(섹션 요소) 밖으로 밀려납니다. 이는 이전 DIV(".left" 및 ".left_second")로 인해 포함 블록 오른쪽의 사용 가능한 공간이 소진되었기 때문입니다.

이 문제를 해결하고 세 번째 DIV를 블록을 포함하는 경우 다음 중 하나를 수행할 수 있습니다.

  • "float: left;"를 설정합니다. 두 번째 DIV 옆에 배치합니다.
  • 세 DIV를 모두 수용할 수 있도록 포함 블록의 너비를 늘립니다.

위 내용은 플로팅 요소는 페이지의 일반적인 흐름과 어떻게 상호 작용합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿