최근 프로젝트에서 이 문제가 여러 번 발생했습니다.
로 해결했지만 그렇지 않습니다. 잘 모르겠습니다. 온라인에서 관련 내용을 확인해보니 li 에 float를 설정한 후 현재의 일반적인 문서 흐름에서 벗어나 외부 ul의 높이를 늘릴 수 있는 방법이 없다는 것을 알았습니다.다음 코드를 예로 들어보겠습니다. 실제로 여러 가지 솔루션이 있습니다. 제가 사용한 솔루션은 가장 간단하지 않습니다.
하지만 제가 기대하는 효과는 이렇습니다.
.
ul의 내용이 고정된 경우 ul에 높이를 추가하면 문제가 해결될 수 있습니다. 그러나 발생한 프로젝트에서는 li가 동적으로 생성되고 숫자를 확인할 수 없으므로 실제로 높이는 auto로만 설정할 수 있습니다. , 이때 외부 ul에 부동 속성을 추가하면 문제가 해결될 수 있지만 때로는 레이아웃이 영향을 받고 상황에 따라서만 결정될 수 있습니다. 또한 ul에 Overflow:auto/hidden을 추가하는 것도 해결할 수 있습니다. 문제가 발생합니다. ie6과 호환되도록 하려면 뒤에 "zoom:1" 또는 "width:100%"를 추가하면 됩니다.
마지막으로 정리하면 총 4가지 방법이 있습니다.
첫 번째 방법 : html 코드의 마지막 li 뒤에 빈 요소를 추가하여 float를 지웁니다. div는 p 또는 기타로 대체될 수 있습니다. 세부 내용은 다음과 같습니다.
두 번째 방법 : 고정 높이를 ul로 설정합니다. 세부 내용은 다음과 같습니다.
세 번째 방법 : 오버플로 속성을 ul로 설정합니다. 이는 Overflow:hidden일 수도 있습니다. 세부 내용은 다음과 같습니다.
네 번째 방법: ul에 부동 속성을 추가합니다. float:right로 변경할 수 있지만 레이아웃이 영향을 받을 수 있습니다. 세부 내용은 다음과 같습니다.
사람마다 방법이 달라야 하는데 저는 세 번째 방법이 가장 쉬운 것 같은데 앞으로는 이 방법을 사용하겠습니다. ㅎㅎ 퇴근해요~~