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

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

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

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

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

해상도

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

겹칠 때 유용할 수 있습니다

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