플로팅 요소가 Div 너비에 영향을 주지 않는 것처럼 보이는 이유는 무엇입니까?

CSS Float 동작: Div 너비 보존 이해

float:left 속성을 HTML 요소에 적용할 때 다음 요소가 예상됩니다. 새 줄로 넘어가는 대신 왼쪽으로 밀려납니다. 그러나 특정 상황에서는 div 너비가 영향을 받지 않는 것처럼 보일 수 있습니다.

주어진 예에서 두 번째 div(class="yellow" 포함)의 콘텐츠는 올바르게 정렬되었지만 div 자체는 여전히 컨테이너의 전체 너비에 걸쳐 있습니다. 이 동작은 부동 위치 지정의 기본 특성에서 비롯됩니다.

요소가 부동이면 문서의 일반적인 흐름에서 제거됩니다. 그러나 부동 요소가 차지한 공간은 해당 공간을 차지했을 후속 요소에 의해 여전히 "예약"되어 있습니다.

이러한 공간 예약은 CSS 사양에 문서화되어 있으며 위치 지정되지 않은 블록은 다음과 같이 명시되어 있습니다. div와 같은 레벨 요소는 부동 소수점을 세로 레이아웃 측면에서 존재하지 않는 것처럼 처리합니다. 그러나 라인 상자(텍스트가 포함된 직사각형 영역)는 float의 여백 상자를 수용하기 위해 짧아집니다.

결과적으로 후속 요소의 내용은 float의 측면 아래로 흐르지만 너비는 float의 측면으로 흐릅니다. 컨테이너(플로팅되지 않은 다음 요소에 의해 결정됨)는 예약된 상태로 유지됩니다.

이 문제를 해결하기 위한 한 가지 해결책은 후속 요소에 오버플로 속성(예: Overflow: Hidden)을 적용하는 것입니다. 이렇게 하면 요소가 부동 요소의 여백 상자와 겹치는 것을 방지하는 새로운 블록 형식화 컨텍스트가 설정됩니다. 이렇게 하면 후속 요소가 플로트와 겹치지 않는 크기로 축소됩니다.

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