ホームページ >ウェブフロントエンド >htmlチュートリアル >擬似オブジェクト セレクター E:after を使用して明確なフローティング効果を実現_html/css_WEB-ITnose
擬似オブジェクト セレクター E:after を使用して明確なフローティング効果を実現_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:28:422061ブラウズ
疑似オブジェクト セレクター E:after を使用して、クリアなフローティング効果を実現します。
フロートのクリアは古い話で、ほとんど話題になっている記事がたくさんあります。
これはもちろん、フローティングはセンタリングを避けるために使用する必要があるテクニックであるため、フロートをクリアすることは当然必要ですが、この章では前の比較を使用するため、フロートをクリアする 1 つの方法を再度紹介する必要があります。珍しい擬似オブジェクト セレクターです。皆さんの注目を集めることを願っています。
まずコード例を見てみましょう:
<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><head><style type="text/css">#box{ width:300px; margin:0px auto; border:5px solid red;}#box .left{ width:80px; height:50px; background:green; float:left; margin-left:10px;}#box .clear{clear:both}</style></head><body><div id="box"> <div class="left"></div> <div class="left"></div> <div class="left"></div> <div class="clear"></div></div></body></html> 上記のコードは float をクリアするための通常のコードですが、余分な div タグが存在するため完全ではありません。ブラウジングの増加 ブラウザーの解釈の圧力により、ページが十分に明確ではないため、擬似オブジェクト セレクターを使用して変換を行います。 コードは次のとおりです。
<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><head><style type="text/css">#box{ width:300px; margin:0px auto; border:5px solid red; zoom:1;}#box .left{ width:80px; height:50px; background:green; float:left; margin-left:10px;}.clearfix{*zoom:1;}.clearfix:after{ content:"."; display:block; height:0; visibility:hidden; clear:both; } </style></head><body><div id="box" class="clearfix"> <div class="left"></div> <div class="left"></div> <div class="left"></div></div></body></html> 上記のコードでは、:after 擬似- を使用します。オブジェクト セレクターを使用して擬似要素を作成し、この擬似要素を指定します。要素設定では、コンテンツをポイントに設定し、それをブロック レベルの要素に設定してクリアします。両方を同時に実行して、フロートをクリアする効果を実現します。
関連書籍:
1. float をクリアするには、「CSS で float をクリアする方法の概要」の章を参照してください。
2.E:after は、CSS 疑似オブジェクトセレクター E:after/E::after の章を参照できます。
元のアドレスは次のとおりです: http://www.softwhy.com/forum.php?mod=viewthread&tid=15391
詳細については、以下を参照してください: http://www.softwhy.com/divcss/