플로팅 요소가 후속 Div의 너비에 영향을 주지 않는 이유는 무엇입니까?

CSS Float가 후속 Div의 너비를 변경하지 않는 이유는 무엇입니까?

요소에서 float:left 속성을 활용하면 다음과 같은 현상이 발생할 수 있습니다. 후속 요소는 부동 요소 아래가 아닌 오른쪽에 위치하게 됩니다. 그러나 어떤 경우에는 후속 요소가 계속 전체 너비에 걸쳐 있을 수 있습니다.

이는 CSS에서 플로팅 요소의 기본 동작으로 인해 발생합니다. 요소가 부동되면 문서의 일반적인 흐름에서 제거되어 사실상 이미지처럼 됩니다. 플로팅된 요소 뒤에 오는 콘텐츠는 그 주위로 흐르면서 줄바꿈을 만듭니다.

그러나 후속 요소에 사용할 수 있는 가로 공간을 결정하는 포함 블록의 너비는 플로팅된 요소의 영향을 받지 않습니다. 플로팅된 요소의 여백 상자(모든 콘텐츠 포함)는 포함 블록에 예약되어 있으므로 후속 요소는 여전히 오른쪽 가장자리에 정렬되어야 합니다.

W3C에서 제공한 예는 이 동작을 보여줍니다.

[단락의 다음 요소와 겹치는 부동 이미지]

이미지에서 볼 수 있듯이 부동 요소는 포함 블록에서 공간을 차지하고 후속 콘텐츠는 이를 둘러쌉니다. 부동 소수점 오른쪽에 있는 줄 상자는 이를 수용하기 위해 단축됩니다.

해결책: 새 블록 형식 지정 컨텍스트 설정

후속 요소가 부동 개체와 겹치는 것을 방지하려면 요소에서 CSS는 오버플로 속성을 활용하여 솔루션을 제공합니다. 오버플로 속성을 'visible' 이외의 항목(예: 'hidden' 또는 'scroll')으로 설정하면 요소에 대한 새로운 블록 서식 컨텍스트가 설정됩니다.

이 새로운 블록 서식 컨텍스트 내에서 플로팅 요소의 여백 상자 제한되어 동일한 컨텍스트에서 다른 부동 소수점과 겹치는 것을 금지합니다. 결과적으로, 이제 후속 요소는 부동 요소의 오른쪽에 자체적으로 정렬될 수 있습니다.

[오버플로가 적용된 예: 숨겨진 적용]

.yellow {

overflow: hidden;

}

이 동작은 플로트 요소 주위에 흐르는 콘텐츠가 플로트 이후에 정상적으로 계속될 만큼 충분히 긴 요소를 처리할 때 특히 관련이 있습니다. 기본적으로 겹치는 것을 제한하면 콘텐츠가 플로팅된 요소 아래로 계속되는 것을 방지할 수 있습니다.

위 내용은 플로팅 요소가 후속 Div의 너비에 영향을 주지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!