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

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

웹 페이지에서 요소를 배치할 때 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!