왜 `float: left`가 Div의 너비를 변경하지 않습니까?

CSS Float가 Div 너비 수정에 실패하는 이유

문제 설명

CSS에서 float: left 속성은 대신 후속 요소를 왼쪽으로 이동해야 합니다. 새로운 라인을 만드는 것. 그러나 주어진 예와 같은 시나리오에서는 두 번째 div가 계속해서 전체 너비에 걸쳐 예상을 무시합니다. 반면에 내용은 올바르게 정렬됩니다.

동작 설명

이 동작은 float 위치 지정에 내재되어 있습니다. 요소가 부동(이 경우 .inline div)되면 콘텐츠가 오른쪽 주위로 흐릅니다. 라인 상자는 float의 여백 상자를 수용하기 위해 단축되지만 포함 블록(.yellow div에 의해 설정됨)의 너비는 예약된 상태로 유지됩니다. 이는 CSS 사양에 지정되어 있습니다.

해결책

.yellow div가 부동 요소와 겹치는 것을 방지하려면 visible 이외의 값으로 오버플로 속성을 추가할 수 있습니다. 이렇게 하면 브라우저가 새로운 블록 형식 컨텍스트를 생성하여 중복을 방지합니다.

위 내용은 왜 `float: left`가 Div의 너비를 변경하지 않습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!