UL, OL 앞에 float 요소가 있어서 포지셔닝 버그가 발생합니다

코드 예:

<p style="float:left; width:300px;margin-right:30px;">

<img src="xxx.jpg" alt="  float ol" />

</p>

 <ol>

      <li>                ,      </li>

      <li>          </li>

      <li>                        。</li>

 </ol>

다음 그림의 효과가 나타납니다.

ol의 내용은 p의 오른쪽에 나타나지만 전체 OL 블록의 위치는 그림과 같다. left는 앞의 p 요소의 오른쪽이 아니라 페이지의 왼쪽을 받친다. 이때 p의 Margin은 ol에 대해 무효이기 때문에 알 수 있듯이 ol 자체의 번호가 가려져 있다.
이럴 때 올에게도 플로트:left를 더하면 정상이 된다.그러나 대부분의 경우 이float는 원래 넣지 말아야 하는 것이고 ol 뒤의 원소 포지셔닝 오류를 초래할 수 있다.
이 문제는 엉뚱해 보이고 모든 브라우저가 이렇기 때문에 호환성 문제를 배제할 수 있다.
그러나 이 문제를 해결하는 것도 매우 간단하다. 오일에overflow를 더하면 auto나hidden일 수 있지만,visible일 수는 없다.IE를 겸용하기 위해서는zoom:1을 추가해야 합니다.
전체 CSS 코드:

ul,ol{overflow:auto;zoom:1;}

이제 모든 브라우저가 올바르게 작동합니다. ol 블록의 위치는 그림과 같습니다.
문제가 해결되었다. 마지막으로 몇 마디 말했다. 이 문제를 해결하는 과정은 내가 영어로 검색한 외국 사이트의 결과이기 때문이다. 나도'ul전의float요소'와 유사한 것을 검색해 보았지만 원하는 답을 찾지 못했다.이에 대해 나는 매우 어쩔 수 없음을 표한다.
 
본문 링크: http://www.jo2.org/204.html.전재는 보류해 주십시오.