플로팅 요소로 인해 텍스트가 아래로 이동하는 대신 줄바꿈되는 이유는 무엇입니까?

왜 텍스트가 플로팅 요소 아래로 이동하는 대신 플로팅 요소 주위를 둘러싸나요?

div를 플로팅할 때 텍스트가 플로팅 요소를 감싸는 것이 직관에 반하는 것처럼 보일 수 있습니다. 다른 요소처럼 아래로 이동하는 대신 주위로 이동합니다. 원하는 레이아웃을 달성하려면 부동 동작의 메커니즘을 이해하는 것이 중요합니다.

부동 속성 설명

CSS 문서에 따르면 부동 속성은 다음과 같습니다.

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

플로팅 요소의 주요 기능

고려해야 할 플로트 요소의 두 가지 중요한 측면:

• 일반 흐름에서 제거됨: 허용 다른 요소는 플로팅된 요소와 겹치거나 겹쳐집니다.
• 텍스트 줄 바꿈: 텍스트와 인라인 수준 요소만 플로팅된 요소를 둘러쌉니다.

예

아래 코드에서는 빨간색 div가 왼쪽으로 떠서 파란색 div가 둘러싸도록 합니다.

<code class="css">.float {
  width: 100px;
  height: 100px;
  background: red;
  float: left;
}

.blue {
  width: 200px;
  height: 200px;
  background: blue;
}</code>

<code class="html"><div class="float"></div>
<div class="blue"></div></code>

위 내용은 플로팅 요소로 인해 텍스트가 아래로 이동하는 대신 줄바꿈되는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!