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>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
