ホームページ > 記事 > ウェブフロントエンド > css:clear float_html/css_WEB-ITnose
css:clear float_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:37:281179ブラウズ
フロートをクリアするために、このように疑似クラスを使用することがよくあります
.clearfix:after { content: ""; display: block; clear: both; height: 0;}.clearfix { *zoom: 1; }//hack IE6我们来看一下样例：
<!DOCTYPE html><html><head> <title></title> <style> *{ padding: 0px ; margin: 0px ; } .block{ width: 100px ; height: 100px ; float: left ; margin:10px; border: solid 1px ; } .clearfix:after{ content: "" ; display: block; clear: both ; } </style></head><body><div class="clearfix"> <div class="block"></div> <div class="block"></div> </div> <div class="block"></div> <div class="block"></div></body></html> 本来は、4 つのグリッドが同じ列に配置されます。フロートをクリアした後、フロートがクリアされた場所でラインブレイクします。
float をクリアするための clearfix クラスを親クラスに追加する必要があることに注意してください。親クラスに追加しないと意味がありません。私の個人的な理解はこれです。 before と after のような疑似クラスは、実際には要素の前後に要素を追加するので、効果は同じです
<!DOCTYPE html><html><head> <title></title> <style> *{ padding: 0px ; margin: 0px ; } .block{ width: 100px ; height: 100px ; float: left ; margin:10px; border: solid 1px ; } .clear{ clear: both; } </style></head><body><div> <div class="block"></div> <div class="block"></div> <div class="clear"></div> </div> <div class="block"></div> <div class="block"></div></body></html> ただし、以下は機能しないことに注意してください
<body> <div class="block"></div> <div class="block clearfix"></div> <div class="block"></div> <div class="block"></div></body>
次のこともできますオーバーフローを使用してフロートをクリアする
rreeerreee
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。