UL,OLの前にfloat元素があって位置決めのbugを招きます

サンプルコード:

<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自体のシーケンス番号がブロックされていることがわかります.
このときolにもfloat:leftを付けると正常になります.しかし、ほとんどの場合、このfloatは本来追加すべきではなく、olの後ろの要素の位置決めエラーを引き起こす可能性があります.
この問題は無厘頭に見え、すべてのブラウザがこのようにして互換性の問題を排除することができます.
しかし、この問題を解決するのも簡単です.olにoverflowを加えると、autoかhiddenでもいいですが、visibleではありません(デフォルト).IE互換性のためにzoom:1も追加しなければなりません.
完全CSSコード:

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

すべてのブラウザで正常になりました.olブロックの位置は図のようになります.
問題は解決して、最後にいくつかのツッコミを入れます:この問題を解決する過程、私が英語で検索した国外のウェブサイトの上の結果のためで、私も“ul前のfloat要素”の類似を検索したことがあって、しかしすべて欲しい答えが見つかりません.これに対して私は仕方がないと言った.
 
本リンク:http://www.jo2.org/204.html.転載は保留してください.