부동 상위 요소의 높이를 늘리는 방법

이번에는 floating부모 요소의 높이를 지원하는 방법과 부동 부모 요소의 높이를 지원하기 위해 어떤 주의사항이 있는지 보여드리겠습니다. 다음은 실제 사례입니다.

float 속성 값을 none이 아닌 하위 요소로 설정하면 상위 요소의 높이가 축소되는 두 가지 상황이 발생합니다.

상위 요소에 높이가 설정되지 않은 다음 상위 요소가 설정됩니다. 이번에는 키가 없습니다.

상위 요소에서 설정한 높이가 충분하지 않아 하위 요소가 오버플로됩니다.

li 요소에 높이를 지정하고 왼쪽으로 띄울 때 ul의 높이는 0

해결책:

활성화합니다. BFC:

　　설정 요소의 overflow 속성은 visible

          요소의 float 속성을 none을 제외한 속성값

으로 설정               요소를 absolute position absolute로 설정

   요소의 display 설정 속성: inline-block 또는 table-cell, flex, inline-flex

Clear Floating

상위 요소에 적절한 높이를 추가하세요

이 사례를 읽으신 후 방법을 익히셨으리라 믿습니다. PHP 중국어 웹사이트의 다른 관련 기사도 주목해주세요!

관련 읽기:

div 컨테이너의 스크롤 고정을 구현하기 위해 getBoundingClientRect()를 사용하는 방법

폭포 흐름 레이아웃을 구현하는 두 가지 방법

버튼 뒤에 "점" 테두리를 표시하는 방법 클릭되었습니다

위 내용은 부동 상위 요소의 높이를 늘리는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!