텍스트가 플로팅된 요소 주위를 둘러싸는 이유는 무엇입니까?

Barbara Streisand
풀어 주다: 2024-10-30 13:49:26
원래의
953명이 탐색했습니다.

Why Does Text Wrap Around Floated Elements?

텍스트 줄 바꿈: 텍스트가 부동 주위로 흐르는 이유는 무엇입니까?

웹 페이지에서 요소를 배치할 때 HTML 요소의 기본 동작은 다음과 같습니다. 일반적인 문서 흐름에 지정된 대로 위에서 아래로 흐릅니다. 그러나 float 속성이 요소에 적용되면 이 동작이 변경됩니다.

Floating Elements: Breaking the Flow

Float는 요소를 왼쪽 또는 오른쪽에 배치합니다. 텍스트와 인라인 요소가 컨테이너를 감싸게 됩니다. 이는 부동 요소가 페이지의 일반적인 흐름에서 제거되기 때문입니다. 즉, 절대적으로 배치된 요소와 유사하게 다른 요소가 겹치거나 겹칠 수 있기 때문입니다.

텍스트 및 인라인 요소: 유일한 예외

다른 모든 요소는 플로트 요소의 위치에 영향을 받지만 텍스트 및 인라인 요소는 예외입니다. 그들은 겹치는 것을 피하면서 부동 요소 주위를 계속 둘러쌉니다.

부동 속성 이해

CSS 문서에 따르면:

  • 부동 부동 CSS 속성은 컨테이너의 왼쪽이나 오른쪽에 요소를 배치하여 텍스트와 인라인 요소가 요소를 둘러쌀 수 있도록 합니다.
  • 요소는 페이지의 일반적인 흐름에서 제거되지만 여전히 페이지의 일부로 남아 있습니다. flow.

이러한 속성을 기반으로 다음과 같은 결론을 내릴 수 있습니다.

  • 일반 흐름에서 제거됨: 플로팅된 요소는 다른 요소와 겹치거나 겹칠 수 있습니다. 일반 흐름의 요소.
  • 텍스트 및 인라인 요소에 대한 래핑 예외: 이러한 요소는 위치에 관계없이 항상 부동 요소를 둘러쌉니다.

실행 예

다음 HTML 및 CSS 코드를 고려하세요.

<code class="html"><div class="float"></div>
<div class="blue"></div></code>
로그인 후 복사
<code class="css">.float {
  width: 100px;
  height: 100px;
  background: red;
  float: left;
}

.blue {
  width: 200px;
  height: 200px;
  background: blue;
}</code>
로그인 후 복사

이 예에서는 "float" 클래스가 있는 빨간색 div가 배치됩니다. 클래스가 "blue"인 파란색 div는 그 아래에 배치됩니다. 그러나 빨간색과 파란색 div 사이에 나타나는 모든 텍스트는 빨간색 div를 둘러싸서 텍스트 흐름의 무결성을 유지합니다.

위 내용은 텍스트가 플로팅된 요소 주위를 둘러싸는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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