내 플로팅 Div가 후속 Div의 크기를 조정하지 않는 이유는 무엇입니까?

Float 크기가 조정되지 않는 Div의 미스터리

CSS float를 사용할 때 후속 요소가 새 요소로 흘러가지 않고 왼쪽에 정렬된다고 가정합니다. 선. 그러나 제공된 예시와 같은 일부 시나리오에서는 다음 div가 첫 번째 div의 오른쪽에서 시작하는 대신 계속해서 전체 너비에 걸쳐 있습니다.

이 동작을 이해하기 위해 float의 복잡성을 자세히 살펴보겠습니다. 포지셔닝. 요소가 부동(이 경우 .inline div)되면 그 아래의 콘텐츠가 해당 요소의 오른쪽에 정렬됩니다. 그러나 후속 요소(.yellow div)에 의해 설정된 포함 블록의 너비는 여전히 유지됩니다.

이 동작은 CSS 사양에 설명되어 있습니다. 위치가 지정되지 않은 블록 상자는 부동 소수점이 그렇지 않은 것처럼 수직으로 흐릅니다. 존재하다. 그러나 플로트 옆의 라인 상자는 플로트의 여백 상자를 수용하기 위해 짧아집니다.

따라서 블록 수준 요소(예: .yellow div)에 배경이 있는 경우 플로트 요소를 통해 확장됩니다.

해결책

CSS 레벨 2.1에 따르면 특정 속성(블록 수준 대체, 새로운 블록 서식 컨텍스트를 설정하는 요소)을 가진 요소는 여백 상자와 겹쳐서는 안 됩니다. 같은 맥락에서 모든 수레. .yellow div에 "visible" 이외의 "overflow" 속성을 추가하면 부동 요소와 겹치는 것을 방지할 수 있습니다.

겹칠 때 유용할 수 있음

다음이 중요합니다. 플로팅된 요소 뒤의 콘텐츠가 정상적으로 계속될 만큼 긴 상황에서는 겹치는 것이 도움이 될 수 있습니다. 기본적으로 콘텐츠를 제한하면 콘텐츠가 플로팅된 요소 아래로 흐르지 않을 수 있습니다.

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