互換性の高いフロートをクリアするオーバーフロー CSS の例_html/css_WEB-ITnose

float のクリアは、CSS を書く人なら誰でも使用しているようですが、主要なブラウザには互換性があるため、CSS ユーザーにとっては、float をクリアするには、互換性を持たせるために多くのコードを記述する必要があります。 。実践を模索した結果、float をクリアする簡単な方法を見つけました。これは使いやすいだけでなく、FF Firefox、OPera、Chrome、IE8 でサポートされています。使用する場合は、overflow 属性を追加するだけです。クリアする必要があるタグ。参考のための完全な例を次に示します。

CSS コード部分:

    ul{        list-style:none;        height:auto;       margin:0;p        adding:0;        background-color:#436973;        }        li{        float:left;        width:80px;        height:80px;        background-color:#83B1DF;        }        .demo{        clear:both;        border:1px solid #FF00FF;        margin-bottom:5px;        }       .overflow{        overflow:auto;        zoom:1;        background-color:#43FF73;        }        ul{        list-style:none;        height:auto;      margin:0;       padding:0;        background-color:#436973;       }        li{        float:left;        width:80px;        height:80px;        background-color:#83B1DF;        }        .demo{        clear:both;        border:1px solid #FF00FF;        margin-bottom:5px;       }        .overflow{        overflow:auto;       zoom:1;        background-color:#43FF73;       }

HTML コード部分は次のとおりです:

<div class="demo">02    <ul class="overflow">        <li>1</li>        <li>2</li>        <li>3</li>       <li>4</li>        <li>5</li>        <li>6</li>        <li>7</li>       <li>8</li>        <li>9</li>        </ul>        </div>       <div class="demo">        <ul>        <li>1</li>        <li>2</li>        <li>3</li>        <li>4</li>        <li>5</li>        <li>6</li>        <li>7</li>        <li>8</li>        <li>9</li>        </ul>        </div>