HTML 및 CSS의 부동 요소: 여전히 페이지 흐름에 어떤 영향을 미치나요?

플로팅 요소: 흐름 탐색

HTML과 CSS에서 플로팅 요소는 레이아웃과 디자인의 핵심 개념입니다. 그러나 그들의 행동을 이해하는 것은 약간 까다로울 수 있습니다. 플로팅 요소의 세계로 뛰어들어 몇 가지 일반적인 질문을 살펴보겠습니다.

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

플로팅 요소는 종종 플로팅 요소에서 제거되는 것으로 설명됩니다. 페이지의 정상적인 흐름이지만 여전히 페이지의 일부로 남아 있습니다. 이 개념은 처음에는 혼란스러울 수 있으며, 특히 플로팅 요소가 다른 요소와 겹칠 수 있다는 점을 관찰할 때 더욱 그렇습니다.

이를 이해하는 열쇠는 플로팅 요소가 텍스트와 인라인 요소의 흐름에 계속 영향을 미친다는 것입니다. 페이지의 실제 레이아웃에서 제외되더라도 여전히 텍스트가 페이지를 감싸는 방식에 영향을 미칩니다. 이것이 "여전히 흐름의 일부로 남아 있는" 것으로 간주되는 이유입니다.

예를 들어 HTML 및 CSS 코드 예제를 고려해보세요.

<code class="html"><section>
  <div class="left">Left</div>
  <div class="left_second">Middle</div>
  <div class="right">Right</div>
</section></code>

<code class="css">section {
  border: 1px solid blue;
}

div {
  margin: 5px;
  width: 200px;
  height: 50px;
}

.left {
  float: left;
  background: pink;
}

.left_second {
  background: blue;
}

.right {
  float: right;
  background: cyan;
}</code>

float를 추가할 때 : 왼쪽; 속성을 첫 번째 div .left에 추가하면 컨테이너의 왼쪽으로 이동하여 텍스트가 컨테이너 주위를 둘러쌀 수 있습니다. 두 번째 및 세 번째 div는 첫 번째 div를 기준으로 정상적으로 배치됩니다. 이는 첫 번째 div가 부동 상태이더라도 여전히 주변 텍스트의 흐름에 영향을 미친다는 것을 보여줍니다.

Containing Block 외부

이제 왜 세 번째 div는 포함 블록 외부에 있습니다. 예제 코드에서 포함 블록은

요소. 세 번째 div .right에 float: right;가 있으므로 포함 블록의 오른쪽 가장자리로 이동합니다.

포함 블록의 너비가 부동 요소를 수용할 만큼 충분하지 않으면 외부로 쏟아집니다. 블록의. 이 경우 세 번째 div에 비해 컨테이닝 블록이 너무 좁아서 오버플로되어 섹션 외부에 나타납니다.

이를 방지하려면 컨테이닝 블록의 너비를 늘리거나 Clearfix 기술을 사용하여 다음을 수행할 수 있습니다. 플로팅 요소를 지웁니다. Clearfix 기술에는 숨겨진 요소를 추가하는 작업이 포함됩니다. 컨테이너 블록이 모든 부동 요소를 포함하도록 강제합니다.

위 내용은 HTML 및 CSS의 부동 요소: 여전히 페이지 흐름에 어떤 영향을 미치나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!