> 웹 프론트엔드 > CSS 튜토리얼 > 플로팅 요소로 인해 텍스트가 아래로 이동하는 대신 줄바꿈되는 이유는 무엇입니까?

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

Mary-Kate Olsen
풀어 주다: 2024-10-31 19:45:02
원래의
910명이 탐색했습니다.

Why Do Floated Elements Cause Text to Wrap Instead of Shifting Down?

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

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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